Analyze the problems encountered when upgrading webpack3 to webpack4 version (summary)

In the previous article "VIM Chinese garbled code issues you deserve to know (share)", we learned about the Chinese garbled code issues in VIM. The following article will let you know about the problems encountered when upgrading webpack3 to webpack4 version. Let's take a look.

It is said that webpack3 is almost 60%-80% faster than webpack4.

After the successful upgrade, I will record that the main projects are vue ^2.5.9, webpack ^4.10.2, webpack-dev-sever ^3.1.4, also included in the upgrade is vue-loader ^15

After the project is recompiled, it is reduced from the original 1.7MB to 1.1MB, it seems that the compression is also affected by the effect.

The following points need to be modified:

vue-loader14 to 15 need to add the following configuration

const VueLoaderPlugin = require('vue-loader/lib/plugin')  ++++
const MiniCssExtractPlugin = require('mini-css-extract-plugin')   // webpack 4  +++

const ExtractTextPlugin = require('extract-text-webpack-plugin') //for webpack3  -----

module.exports = {
...
plugins: [
        + new VueLoaderPlugin(),  ++++
        + new MiniCssExtractPlugin({filename:'mian.css'})  //for webpack 4 +++
         - new ExtractTextPlugin({filename:'main.css'}) //for webpack 3 ---
]
...
}

webpack-dev-serverThe following changes need to be made after the upgrade

devServer: {
     ++ contentBase: path.resolve(__dirname, '../dos-html'),  // 需要指定路径 ++
        port: 7001,
        hot: true,
        // open: false,
        inline: true,
        compress: true,
        historyApiFallback: true,
       ....
    },

webpack3The configuration that needs to be changed after the upgrade4

plugins: [
   //已经移除
   new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       minChunks: function (module) {
         // any required modules inside node_modules are extracted to vendor
         return (
           module.resource && /\.js$/.test(module.resource) &&
           module.resource.indexOf( path.join(__dirname, '../node_modules')) === 0
         )
       }
     }),
   new webpack.optimize.UglifyJsPlugin(...）//已经移除
}

// ===> 修改为以下

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

moudel.exports = {

mode: 'production', ++ 这里指定模式。
...
optimization: {
    splitChunks: {
      name(module) {
        return (
          module.resource && /\.js$/.test(module.resource) &&
          module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
        )
      }
    },
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            // drop_debugger: true,
            // drop_console: true
          },
          sourceMap: false
        }
      })
    ]
  },
...
}

Pay attention to the various other error messages. It may be that the module version is too low. Upgrade them and it will be OK.

【End】

Recommended learning: Web pack introductory video tutorial

The above is the detailed content of Analyze the problems encountered when upgrading webpack3 to webpack4 version (summary). For more information, please follow other related articles on the PHP Chinese website!