简单修改项目架构，优化 webpack ，升级依赖版本。

Author: wangchenhao

build/vendor_manifest.json

@@ -0,0 +1 @@
+{"name":"vendor_library","content":{"../node_modules/moment/moment.js":{"id":0,"meta":{}},"../node_modules/axios/lib/utils.js":{"id":1,"meta":{}},"../node_modules/process/browser.js":{"id":2,"meta":{}},"../node_modules/webpack/buildin/global.js":{"id":3,"meta":{}},"../node_modules/axios/lib/defaults.js":{"id":4,"meta":{}},"../node_modules/vue/dist/vue.runtime.esm.js":{"id":5,"meta":{"harmonyModule":true},"exports":["default"]},"../node_modules/axios/lib/adapters/xhr.js":{"id":6,"meta":{}},"../node_modules/axios/lib/cancel/Cancel.js":{"id":7,"meta":{}},"../node_modules/axios/lib/cancel/isCancel.js":{"id":8,"meta":{}},"../node_modules/axios/lib/core/createError.js":{"id":9,"meta":{}},"../node_modules/axios/lib/helpers/bind.js":{"id":10,"meta":{}},"../node_modules/moment/locale/af.js":{"id":11,"meta":{}},"../node_modules/moment/locale/ar-dz.js":{"id":12,"meta":{}},"../node_modules/moment/locale/ar-kw.js":{"id":13,"meta":{}},"../node_modules/moment/locale/ar-ly.js":{"id":14,"meta":{}},"../node_modules/moment/locale/ar-ma.js":{"id":15,"meta":{}},"../node_modules/moment/locale/ar-sa.js":{"id":16,"meta":{}},"../node_modules/moment/locale/ar-tn.js":{"id":17,"meta":{}},"../node_modules/moment/locale/ar.js":{"id":18,"meta":{}},"../node_modules/moment/locale/az.js":{"id":19,"meta":{}},"../node_modules/moment/locale/be.js":{"id":20,"meta":{}},"../node_modules/moment/locale/bg.js":{"id":21,"meta":{}},"../node_modules/moment/locale/bm.js":{"id":22,"meta":{}},"../node_modules/moment/locale/bn.js":{"id":23,"meta":{}},"../node_modules/moment/locale/bo.js":{"id":24,"meta":{}},"../node_modules/moment/locale/br.js":{"id":25,"meta":{}},"../node_modules/moment/locale/bs.js":{"id":26,"meta":{}},"../node_modules/moment/locale/ca.js":{"id":27,"meta":{}},"../node_modules/moment/locale/cs.js":{"id":28,"meta":{}},"../node_modules/moment/locale/cv.js":{"id":29,"meta":{}},"../node_modules/moment/locale/cy.js":{"id":30,"meta":{}},"../node_modules/moment/locale/da.js":{"id":31,"meta":{}},"../node_modules/moment/locale/de-at.js":{"id":32,"meta":{}},"../node_modules/moment/locale/de-ch.js":{"id":33,"meta":{}},"../node_modules/moment/locale/de.js":{"id":34,"meta":{}},"../node_modules/moment/locale/dv.js":{"id":35,"meta":{}},"../node_modules/moment/locale/el.js":{"id":36,"meta":{}},"../node_modules/moment/locale/en-au.js":{"id":37,"meta":{}},"../node_modules/moment/locale/en-ca.js":{"id":38,"meta":{}},"../node_modules/moment/locale/en-gb.js":{"id":39,"meta":{}},"../node_modules/moment/locale/en-ie.js":{"id":40,"meta":{}},"../node_modules/moment/locale/en-nz.js":{"id":41,"meta":{}},"../node_modules/moment/locale/eo.js":{"id":42,"meta":{}},"../node_modules/moment/locale/es-do.js":{"id":43,"meta":{}},"../node_modules/moment/locale/es-us.js":{"id":44,"meta":{}},"../node_modules/moment/locale/es.js":{"id":45,"meta":{}},"../node_modules/moment/locale/et.js":{"id":46,"meta":{}},"../node_modules/moment/locale/eu.js":{"id":47,"meta":{}},"../node_modules/moment/locale/fa.js":{"id":48,"meta":{}},"../node_modules/moment/locale/fi.js":{"id":49,"meta":{}},"../node_modules/moment/locale/fo.js":{"id":50,"meta":{}},"../node_modules/moment/locale/fr-ca.js":{"id":51,"meta":{}},"../node_modules/moment/locale/fr-ch.js":{"id":52,"meta":{}},"../node_modules/moment/locale/fr.js":{"id":53,"meta":{}},"../node_modules/moment/locale/fy.js":{"id":54,"meta":{}},"../node_modules/moment/locale/gd.js":{"id":55,"meta":{}},"../node_modules/moment/locale/gl.js":{"id":56,"meta":{}},"../node_modules/moment/locale/gom-latn.js":{"id":57,"meta":{}},"../node_modules/moment/locale/gu.js":{"id":58,"meta":{}},"../node_modules/moment/locale/he.js":{"id":59,"meta":{}},"../node_modules/moment/locale/hi.js":{"id":60,"meta":{}},"../node_modules/moment/locale/hr.js":{"id":61,"meta":{}},"../node_modules/moment/locale/hu.js":{"id":62,"meta":{}},"../node_modules/moment/locale/hy-am.js":{"id":63,"meta":{}},"../node_modules/moment/locale/id.js":{"id":64,"meta":{}},"../node_modules/moment/locale/is.js":{"id":65,"meta":{}},"../node_modules/moment/locale/it.js":{"id":66,"meta":{}},"../node_modules/moment/locale/ja.js":{"id":67,"meta":{}},"../node_modules/moment/locale/jv.js":{"id":68,"meta":{}},"../node_modules/moment/locale/ka.js":{"id":69,"meta":{}},"../node_modules/moment/locale/kk.js":{"id":70,"meta":{}},"../node_modules/moment/locale/km.js":{"id":71,"meta":{}},"../node_modules/moment/locale/kn.js":{"id":72,"meta":{}},"../node_modules/moment/locale/ko.js":{"id":73,"meta":{}},"../node_modules/moment/locale/ky.js":{"id":74,"meta":{}},"../node_modules/moment/locale/lb.js":{"id":75,"meta":{}},"../node_modules/moment/locale/lo.js":{"id":76,"meta":{}},"../node_modules/moment/locale/lt.js":{"id":77,"meta":{}},"../node_modules/moment/locale/lv.js":{"id":78,"meta":{}},"../node_modules/moment/locale/me.js":{"id":79,"meta":{}},"../node_modules/moment/locale/mi.js":{"id":80,"meta":{}},"../node_modules/moment/locale/mk.js":{"id":81,"meta":{}},"../node_modules/moment/locale/ml.js":{"id":82,"meta":{}},"../node_modules/moment/locale/mr.js":{"id":83,"meta":{}},"../node_modules/moment/locale/ms-my.js":{"id":84,"meta":{}},"../node_modules/moment/locale/ms.js":{"id":85,"meta":{}},"../node_modules/moment/locale/my.js":{"id":86,"meta":{}},"../node_modules/moment/locale/nb.js":{"id":87,"meta":{}},"../node_modules/moment/locale/ne.js":{"id":88,"meta":{}},"../node_modules/moment/locale/nl-be.js":{"id":89,"meta":{}},"../node_modules/moment/locale/nl.js":{"id":90,"meta":{}},"../node_modules/moment/locale/nn.js":{"id":91,"meta":{}},"../node_modules/moment/locale/pa-in.js":{"id":92,"meta":{}},"../node_modules/moment/locale/pl.js":{"id":93,"meta":{}},"../node_modules/moment/locale/pt-br.js":{"id":94,"meta":{}},"../node_modules/moment/locale/pt.js":{"id":95,"meta":{}},"../node_modules/moment/locale/ro.js":{"id":96,"meta":{}},"../node_modules/moment/locale/ru.js":{"id":97,"meta":{}},"../node_modules/moment/locale/sd.js":{"id":98,"meta":{}},"../node_modules/moment/locale/se.js":{"id":99,"meta":{}},"../node_modules/moment/locale/si.js":{"id":100,"meta":{}},"../node_modules/moment/locale/sk.js":{"id":101,"meta":{}},"../node_modules/moment/locale/sl.js":{"id":102,"meta":{}},"../node_modules/moment/locale/sq.js":{"id":103,"meta":{}},"../node_modules/moment/locale/sr-cyrl.js":{"id":104,"meta":{}},"../node_modules/moment/locale/sr.js":{"id":105,"meta":{}},"../node_modules/moment/locale/ss.js":{"id":106,"meta":{}},"../node_modules/moment/locale/sv.js":{"id":107,"meta":{}},"../node_modules/moment/locale/sw.js":{"id":108,"meta":{}},"../node_modules/moment/locale/ta.js":{"id":109,"meta":{}},"../node_modules/moment/locale/te.js":{"id":110,"meta":{}},"../node_modules/moment/locale/tet.js":{"id":111,"meta":{}},"../node_modules/moment/locale/th.js":{"id":112,"meta":{}},"../node_modules/moment/locale/tl-ph.js":{"id":113,"meta":{}},"../node_modules/moment/locale/tlh.js":{"id":114,"meta":{}},"../node_modules/moment/locale/tr.js":{"id":115,"meta":{}},"../node_modules/moment/locale/tzl.js":{"id":116,"meta":{}},"../node_modules/moment/locale/tzm-latn.js":{"id":117,"meta":{}},"../node_modules/moment/locale/tzm.js":{"id":118,"meta":{}},"../node_modules/moment/locale/uk.js":{"id":119,"meta":{}},"../node_modules/moment/locale/ur.js":{"id":120,"meta":{}},"../node_modules/moment/locale/uz-latn.js":{"id":121,"meta":{}},"../node_modules/moment/locale/uz.js":{"id":122,"meta":{}},"../node_modules/moment/locale/vi.js":{"id":123,"meta":{}},"../node_modules/moment/locale/x-pseudo.js":{"id":124,"meta":{}},"../node_modules/moment/locale/yo.js":{"id":125,"meta":{}},"../node_modules/moment/locale/zh-cn.js":{"id":126,"meta":{}},"../node_modules/moment/locale/zh-hk.js":{"id":127,"meta":{}},"../node_modules/moment/locale/zh-tw.js":{"id":128,"meta":{}},"../node_modules/webpack/buildin/module.js":{"id":129,"meta":{}},"../node_modules/axios/index.js":{"id":130,"meta":{}},"../node_modules/es6-promise/dist/es6-promise.js":{"id":131,"meta":{}},"../node_modules/js-cookie/src/js.cookie.js":{"id":132,"meta":{}},"../node_modules/lodash/lodash.js":{"id":133,"meta":{}},"../node_modules/vue-class-component/dist/vue-class-component.common.js":{"id":134,"meta":{}},"../node_modules/vue-i18n/dist/vue-i18n.esm.js":{"id":135,"meta":{"harmonyModule":true},"exports":["default"]},"../node_modules/vue-router/dist/vue-router.esm.js":{"id":136,"meta":{"harmonyModule":true},"exports":["default"]},"../node_modules/vuex/dist/vuex.esm.js":{"id":137,"meta":{"harmonyModule":true},"exports":["Store","install","mapState","mapMutations","mapGetters","mapActions","createNamespacedHelpers","default"]},"../node_modules/axios/lib/axios.js":{"id":138,"meta":{}},"../node_modules/axios/lib/cancel/CancelToken.js":{"id":139,"meta":{}},"../node_modules/axios/lib/core/Axios.js":{"id":140,"meta":{}},"../node_modules/axios/lib/core/InterceptorManager.js":{"id":141,"meta":{}},"../node_modules/axios/lib/core/dispatchRequest.js":{"id":142,"meta":{}},"../node_modules/axios/lib/core/enhanceError.js":{"id":143,"meta":{}},"../node_modules/axios/lib/core/settle.js":{"id":144,"meta":{}},"../node_modules/axios/lib/core/transformData.js":{"id":145,"meta":{}},"../node_modules/axios/lib/helpers/btoa.js":{"id":146,"meta":{}},"../node_modules/axios/lib/helpers/buildURL.js":{"id":147,"meta":{}},"../node_modules/axios/lib/helpers/combineURLs.js":{"id":148,"meta":{}},"../node_modules/axios/lib/helpers/cookies.js":{"id":149,"meta":{}},"../node_modules/axios/lib/helpers/isAbsoluteURL.js":{"id":150,"meta":{}},"../node_modules/axios/lib/helpers/isURLSameOrigin.js":{"id":151,"meta":{}},"../node_modules/axios/lib/helpers/normalizeHeaderName.js":{"id":152,"meta":{}},"../node_modules/axios/lib/helpers/parseHeaders.js":{"id":153,"meta":{}},"../node_modules/axios/lib/helpers/spread.js":{"id":154,"meta":{}},"../node_modules/is-buffer/index.js":{"id":155,"meta":{}},"../node_modules/moment/locale recursive ^\\.\\/.*$":{"id":156,"meta":{}},"../node_modules/setimmediate/setImmediate.js":{"id":157,"meta":{}},"../node_modules/timers-browserify/main.js":{"id":158,"meta":{}}}}

build/webpack.base.conf.js

@@ -1,4 +1,5 @@
 var path = require('path')
+var webpack = require('webpack');
 var utils = require('./utils')
 var config = require('../config')
 var svgoConfig = require('../config/svgo-config.json')
@@ -17,13 +18,7 @@ module.exports = {
   },
   resolve: {
     extensions: ['.ts', '.js', '.json'],
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
-      'assets': resolve('src/assets'),
-      'common': resolve('src/common'),
-      'views': resolve('src/views'),
-    }
+    alias: {}
   },
   module: {
     rules: [{
@@ -73,6 +68,10 @@ module.exports = {
     }]
   },
   plugins: [
+    new webpack.DllReferencePlugin({
+      context: __dirname,
+      manifest: require('./vendor_manifest.json')
+    }),
   ]
 }
 

build/webpack.dll.conf.js

@@ -0,0 +1,41 @@
+var path = require('path');
+const webpack = require('webpack');
+const vendors = [
+  'es6-promise',
+  'axios',
+  'js-cookie',
+  'lodash',
+  'moment',
+  'vue',
+  'vuex',
+  'vue-i18n',
+  'vue-router',
+  'vue-class-component',
+  // "element-ui": "^1.4.0",
+];
+
+module.exports = {
+  entry: {
+    vendor: vendors
+  },
+  resolve: {
+    extensions: [".js", ".jsx"]
+  },
+  output: {
+    path: path.resolve(__dirname, '../static'),
+    filename: '[name].dll.js',
+    library: '[name]_library'
+  },
+  plugins: [
+    new webpack.DllPlugin({
+      context: __dirname,
+      path: path.resolve(__dirname, '../build/[name]_manifest.json'),
+      name: '[name]_library'
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+      },
+    }),
+  ]
+};

config/index.js

@@ -13,12 +13,12 @@ module.exports = {
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    productionSourceMap: true,
+    productionSourceMap: false,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
     // Before setting to `true`, make sure to:
     // npm install --save-dev compression-webpack-plugin
-    productionGzip: true,
+    productionGzip: false,
     productionGzipExtensions: ['js', 'css'],
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:

index.html

@@ -27,6 +27,7 @@
     </transition>
   </div>
   <!-- built files will be auto injected -->
+  <script src="/static/vendor.dll.js"></script>
 </body>
 
 </html>

package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "build:dll": "webpack --progress --colors --config build/webpack.dll.conf.js"
   },
   "dependencies": {
     "axios": "^0.16.2",
@@ -19,7 +20,7 @@
     "vue": "^2.3.3",
     "vue-class-component": "^5.0.2",
     "vue-i18n": "^7.0.5",
-    "vue-property-decorator": "5.1.1",
+    "vue-property-decorator": "^6.0.0",
     "vue-router": "^2.7.0",
     "vue2-animate": "^1.0.4",
     "vuex": "^2.3.1",

src/entry/index.ts renamed to src/entry/system/index.ts

@@ -1,8 +1,8 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import { Vue, i18n } from '../Basic';
-import router from '../router';
-import store from '../store';
+import { Vue, i18n } from '../../Basic';
+import router from '../../router';
+import store from '../../store';
 // tslint:disable-next-line:no-unused-expression
 new Vue({
   el: '#app',

src/views/Basis.ts

@@ -0,0 +1,12 @@
+// import Vue from 'vue';
+// import Component from 'vue-class-component';
+import { Vue, Component, Watch, Inject, Provide, Model, Prop, Emit } from 'vue-property-decorator';
+/**
+ * 基类用来定义共用方法
+ * @export
+ * @class Basis
+ * @extends {Vue}
+ */
+export class Basis extends Vue {
+}
+export { Component, Watch, Inject, Provide, Model, Prop, Emit };

src/views/main/index.ts

@@ -1,9 +1,9 @@
-import { Vue, Component } from 'vue-property-decorator';
+import { Basis, Component } from '../Basis';
 
 @Component({
   template: require('./layout.html'),
 })
-class Main extends Vue {
+class Main extends Basis {
   constructor() {
     super();
   }

static/favicon.ico

@@ -21,7 +21,8 @@
     "strictNullChecks": true
   },
   "include": [
-    "./src/**/*.ts"
+    "./src/**/*.ts",
+    "./typings/**/*.ts"
   ],
   "compileOnSave": false
 }

static/vendor.dll.js

@@ -16,3 +16,7 @@ declare module 'vue/types/vue' {
     $confirm: Function;
   }
 }
+declare module 'axios/index' {
+  export interface AxiosResponse {
+  }
+}