update

build/utils.js

@@ -5,9 +5,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const packageConfig = require('../package.json')
 
 exports.assetsPath = function (_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+  const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
-    ? config.build.assetsSubDirectory
+    config.build.assetsSubDirectory :
-    : config.dev.assetsSubDirectory
+    config.dev.assetsSubDirectory
 
   return path.posix.join(assetsSubDirectory, _path)
 }
@@ -30,15 +30,14 @@ exports.cssLoaders = function (options) {
   }
 
   // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
+  function generateLoaders(loader, loaderOptions) {
     const loaders = []
 
     // Extract CSS when that option is specified
     // (which is the case during production build)
     if (options.extract) {
       loaders.push(MiniCssExtractPlugin.loader)
-    }
+    } else {
-    else {
       loaders.push('vue-style-loader')
     }
 
@@ -59,13 +58,14 @@ exports.cssLoaders = function (options) {
 
     return loaders
   }
-
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
+    sass: generateLoaders('sass', {
+      indentedSyntax: true
+    }),
     scss: generateLoaders('sass'),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')

build/vue-loader.conf.js

@@ -1,22 +1,5 @@
 'use strict'
-const utils = require('./utils')
-const config = require('../config')
-const isProduction = process.env.NODE_ENV === 'production'
-const sourceMapEnabled = isProduction
-  ? config.build.productionSourceMap
-  : config.dev.cssSourceMap
 
 module.exports = {
-  loaders: utils.cssLoaders({
+  //You can set the vue-loader configuration by yourself.
-    sourceMap: sourceMapEnabled,
-    extract: isProduction
-  }),
-  cssSourceMap: sourceMapEnabled,
-  cacheBusting: config.dev.cacheBusting,
-  transformToRequire: {
-    video: ['src', 'poster'],
-    source: 'src',
-    img: 'src',
-    image: 'xlink:href'
-  }
 }

build/webpack.base.conf.js

@@ -2,6 +2,7 @@
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
+const { VueLoaderPlugin } = require('vue-loader')
 const vueLoaderConfig = require('./vue-loader.conf')
 
 function resolve (dir) {
@@ -85,6 +86,9 @@ module.exports = {
       }
     ]
   },
+  plugins: [
+    new VueLoaderPlugin(),
+  ],
   node: {
     // prevent webpack from injecting useless setImmediate polyfill because Vue
     // source contains it (although only uses it if it's native).

build/webpack.prod.conf.js

@@ -9,7 +9,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 function resolve(dir) {
@@ -18,6 +18,10 @@ function resolve(dir) {
 
 const env = require('../config/prod.env')
 
+// For NamedChunksPlugin
+const seen = new Set();
+const nameLength = 4;
+
 const webpackConfig = merge(baseWebpackConfig, {
   mode: 'production',
   module: {
@@ -30,42 +34,19 @@ const webpackConfig = merge(baseWebpackConfig, {
   devtool: config.build.productionSourceMap ? config.build.devtool : false,
   output: {
     path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
-    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') //need test
+    chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
   },
   plugins: [
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': env
     }),
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-          warnings: false
-        }
-      },
-      sourceMap: config.build.productionSourceMap,
-      parallel: true
-    }),
     // extract css into its own file
     new MiniCssExtractPlugin({
       filename: utils.assetsPath('css/[name].[contenthash:8].css'),
-      chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css'),
+      chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
     }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    // new OptimizeCSSPlugin({
-    //   cssProcessorOptions: config.build.productionSourceMap ?
-    //     {
-    //       safe: true,
-    //       map: {
-    //         inline: false
-    //       }
-    //     } :
-    //     {
-    //       safe: true
-    //     }
-    // }),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
@@ -82,13 +63,31 @@ const webpackConfig = merge(baseWebpackConfig, {
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
       },
-      // necessary to consistently work with multiple chunks
+      // default sort mode uses toposort which cannot handle cyclic deps
-      chunksSortMode: 'none'
+      // in certain cases, and in webpack 4, chunk order in HTML doesn't
+      // matter anyway
     }),
     new ScriptExtHtmlWebpackPlugin({
       //`runtime` must same as runtimeChunk name. default is `runtime`
       inline: /runtime\..*\.js$/
     }),
+    // keep chunk.id stable when chunk has no name
+    new webpack.NamedChunksPlugin(chunk => {
+      if (chunk.name) {
+        return chunk.name;
+      }
+      const modules = Array.from(chunk.modulesIterable);
+      if (modules.length > 1) {
+        const hash = require("hash-sum");
+        const joinedHash = hash(modules.map(m => m.id).join("_"));
+        let len = nameLength;
+        while (seen.has(joinedHash.substr(0, len))) len++;
+        seen.add(joinedHash.substr(0, len));
+        return `chunk-${joinedHash.substr(0, len)}`;
+      } else {
+        return modules[0].id;
+      }
+    }),
     // keep module.id stable when vender modules does not change
     new webpack.HashedModuleIdsPlugin(),
     // copy custom static assets
@@ -98,19 +97,38 @@ const webpackConfig = merge(baseWebpackConfig, {
       ignore: ['.*']
     }])
   ],
-  // recordsPath: path.join(__dirname, 'records.json'),
   optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        libs: {
+          name: 'chunk-libs',
+          test: /[\\/]node_modules[\\/]/,
+          priority: 10,
+          chunks: 'initial' // 只打包初始时依赖的第三方
+        },
+        elementUI: {
+          name: 'chunk-elementUI', // 单独将 elementUI 拆包
+          priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
+          test: /[\\/]node_modules[\\/]element-ui[\\/]/
+        }
+      }
+    },
     runtimeChunk: 'single',
     minimizer: [
       new UglifyJsPlugin({
         uglifyOptions: {
-          compress: {
+          mangle: {
-            warnings: false
+            safari10: true
           }
         },
         sourceMap: config.build.productionSourceMap,
+        cache: true,
         parallel: true
       }),
+      // Compress extracted CSS. We are using this plugin so that possible
+      // duplicated CSS from different components can be deduped.
+      new OptimizeCSSAssetsPlugin()
     ],
   }
 })
@@ -146,10 +164,10 @@ if (config.build.generateAnalyzerReport || config.build.bundleAnalyzerReport) {
   if (config.build.generateAnalyzerReport) {
     webpackConfig.plugins.push(new BundleAnalyzerPlugin({
       analyzerMode: 'static',
+      reportFilename: 'bundle-report.html',
       openAnalyzer: false
     }))
   }
 }
 
 module.exports = webpackConfig
-

config/index.js

@@ -35,11 +35,6 @@ module.exports = {
     // https://webpack.js.org/configuration/devtool/#development
     devtool: 'cheap-source-map',
 
-    // If you have problems debugging vue-files in devtools,
-    // set this to false - it *may* help
-    // https://vue-loader.vuejs.org/en/options.html#cachebusting
-    cacheBusting: true,
-
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)
@@ -71,7 +66,7 @@ module.exports = {
 
     productionSourceMap: false,
     // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#ource-map',
+    devtool: 'ource-map',
 
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

package.json

@@ -14,11 +14,11 @@
   },
   "dependencies": {
     "axios": "0.18.0",
-    "element-ui": "2.4.4",
+    "element-ui": "2.4.6",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "vue": "2.5.10",
+    "vue": "2.5.17",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },
@@ -35,7 +35,7 @@
     "babel-preset-stage-2": "6.24.1",
     "chalk": "2.4.1",
     "copy-webpack-plugin": "4.5.2",
-    "css-loader": "0.28.7",
+    "css-loader": "1.0.0",
     "eslint": "4.19.1",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-loader": "2.0.0",
@@ -43,14 +43,14 @@
     "eventsource-polyfill": "0.9.6",
     "file-loader": "1.1.11",
     "friendly-errors-webpack-plugin": "1.7.0",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "^4.0.0-alpha",
     "mini-css-extract-plugin": "0.4.1",
     "node-notifier": "5.2.1",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "5.0.0",
-    "ora": "2.1.0",
+    "ora": "3.0.0",
-    "portfinder": "1.0.13",
+    "portfinder": "1.0.16",
-    "postcss-import": "11.0.0",
+    "postcss-import": "12.0.0",
     "postcss-loader": "2.1.6",
     "postcss-url": "7.3.2",
     "rimraf": "2.6.2",
@@ -61,17 +61,17 @@
     "svg-sprite-loader": "3.8.0",
     "uglifyjs-webpack-plugin": "1.2.7",
     "url-loader": "1.0.1",
-    "vue-loader": "14.2.2",
+    "vue-loader": "15.3.0",
-    "vue-style-loader": "3.0.3",
+    "vue-style-loader": "4.1.2",
-    "vue-template-compiler": "2.5.10",
+    "vue-template-compiler": "2.5.17",
-    "webpack": "4.16.1",
+    "webpack": "4.16.5",
     "webpack-bundle-analyzer": "2.13.1",
-    "webpack-cli": "3.0.8",
+    "webpack-cli": "3.1.0",
-    "webpack-dev-server": "3.1.4",
+    "webpack-dev-server": "3.1.5",
-    "webpack-merge": "4.1.3"
+    "webpack-merge": "4.1.4"
   },
   "engines": {
-    "node": ">= 4.0.0",
+    "node": ">= 6.0.0",
     "npm": ">= 3.0.0"
   },
   "browserslist": [