Analyze the problems encountered when upgrading webpack3 to webpack4 version (summary)-JS Tutorial-php.cn

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.

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

It is said thatwebpack3is almost 60%-80% faster thanwebpack4.

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

After the project is recompiled, it is reduced from the original1.7MBto1.1MB, it seems that the compression is also affected by the effect.

The following points need to be modified:

vue-loader14to15need 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 --- ] ... }

Copy after login

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, .... },

Copy after login

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 } }) ] }, ... }

Copy after login

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!