I. Package version replacement

webpack
"Webpack" : "^ 3.6.0" = > "^ 4.29.6" "webpack - bundle - analyzer" : "^ 2.9.0" = > "^ 3.1.0" "webpack - cli" : "^ 3.3.0" (ADD) "webpack dev - server" : "^ 2.9.1" = > "^ 3.1.11" "webpack - merge" : "^ 4.1.0" = > "^ 2"Copy the code
loader
"CSS - loader", "^ 0.28.0" = > "^ 2.1.1" file - "loader" : "^ 1.1.4" = > "^ 3.0.1" "inject - loader" : "^ 3.0.0" = > "^ 4.0.1" "postcss - loader" : "^ mid-atlantic moved" = > "^ 3.0.0" "url - loader" : "^ 0.5.8" = > "^ 1.1.2" "vue - loader" : "^ 13.3.0" = > "^ 15.7.0" "vue - style - loader" : "^ 3.0.1" = > "^ 4.1.2" "vue - the template - the compiler" : "^ 2.5.2" = > "^ 2.6.9." "Copy the code
plugin
"Copy -webpack-plugin": "^4.0.1" => "^5.0.1" "friendly-errors-webpack-plugin": "^ 1.6.1" = > "^ 1.7.0" "HTML - webpack - plugin" : "^ 2.30.1" = > "^ 3.2.0" "optimize - the CSS - assets - webpack - plugin" : "^ 3.2.0" = > "^ 5.0.1" "extract - the text - webpack - plugin" : "^ 3.0.0" (DEL) "mini - CSS - extract - the plugin" : "^ 0.5.0" (ADD)Copy the code
eslint
"Eslint" : "^ 4.15.0" = > "^ 4.19.1" "eslint - config - standard" : "^ 10.2.1" = > "^ 11.0.0" "eslint - friendly - the formatter" : "^ 3.0.0" = > "^ 4.0.1" "eslint - loader" : "^ 1.7.1" = > "^ 2.0.0" "eslint - the plugin - import" : "^ 2.7.0" = > "^ 2.12.0" "eslint - plugin - node" : "^ 5.2.0" = > "^ the 6.0.1" "eslint - plugin - promise" : "^ 3.4.0" = > "^ 3.7.0" "eslint - plugin - standard" : "^ 3.0.1" = > "^ 3.1.0" "eslint - plugin - vue" : "^ 4.0.0" = > "^ 4.5.0." "Copy the code

2. Modify the configuration

webpack.dev.conf.js
+  const { VueLoaderPlugin } = require('vue-loader')... plugins: [ +new VueLoaderPlugin()
...
Copy the code
webpack.prod.conf.js
-  const ExtractTextPlugin = require('extract-text-webpack-plugin')
-  const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+  const { VueLoaderPlugin } = require('vue-loader')... const webpackConfig = merge(baseWebpackConfig, { ... + optimization: { + minimize:true,
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          chunks: 'initial',
+          name: 'vendors', + +}'async-vendors': {
+          test: /[\\/]node_modules[\\/]/,
+          minChunks: 2,
+          chunks: 'async',
+          name: 'async-vendors'
+      }
+    },
+    runtimeChunk: { name: 'runtime'+}},plugins: [+new VueLoaderPlugin(),
+   new MiniCssExtractPlugin({
+    filename: utils.assetsPath('css/[name].[contenthash].css'),
+    allChunks: true, - +})new ExtractTextPlugin({
-    filename: utils.assetsPath('css/[name].[contenthash].css'),
-    allChunks: true, -- -})new UglifyJsPlugin({
-    uglifyOptions: {
-       compress: {
-         warnings: false
-       }
-    },
-   sourceMap: config.build.productionSourceMap,
-   parallel: true-}), -new webpack.optimize.CommonsChunkPlugin({
-    name: 'vendor',
-    minChunks (module) {-return(-module.resource && 
-        /\.js$/.test(module.resource) && 
-        module.resource.indexOf(
-          path.join(__dirname, '.. /node_modules'-) = = =0-) -} -}), -new webpack.optimize.CommonsChunkPlugin({
-    name: 'manifest',
-    minChunks: Infinity-}), -new webpack.optimize.CommonsChunkPlugin({
-    name: 'app',
-    async: 'vendor-async',
-    children: true,
-    minChunks: 3-}),Copy the code

The Optimization configuration adds many configuration parameters instead of many plug-ins. 例 句 : It takes care to minimize the use of new UglifyJsPlugin. Optimization document

util.js
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin')

  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader'.options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    // if (options.extract) {
    // return ExtractTextPlugin.extract({
    // use: loaders,
    // fallback: 'vue-style-loader'
    / /})
    // } else {
    // return ['vue-style-loader'].concat(loaders)
    // }
+   return [
+     options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader',
+   ].concat(loaders)
+ }
Copy the code

The extract-text-webpack-plugin is not yet fully supported for Webpack4, the current solution is to use the Mini-CSs-extract-plugin instead.

The end.

Commit details

Sample project address

Wish you progress in study

Wen-bin deng

March 17, 2019