Detailed explanation of vue cli upgrade webpack4 steps-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the steps for upgrading webpack4 from vue cli. What are theprecautions for upgrading webpack4 from vue cli? The following is a practical case, let's take a look.

webpack4 has been released for a while, and the plug-in system has stabilized. I am very dissatisfied with the packaging speed of webpack3, so I decided to upgrade the project I am currently working on and try out webpack4.

New Features

0 Configuration

It should be after parcel came out that the webpack team realized that its configuration was indeed a bit complicated and not easy to get started. so, webapck4 starts to support zero configuration startup. However, the same thing remains true. The 0 configuration of webpack4 only supports the default entry and output, that is, the default entry is ./src and the default output is /dist.

Mode selectionmode

mode has two options, production & development. As a required option, mode cannot be defaulted. In production mode, some necessary optimizations will be made by default, such as code compression and scope promotion, and process.env.NODE_ENV will be specified as production by default. In development mode, incremental builds are optimized, comments and prompts are supported, and source maps under eval are supported, while process.env.NODE_ENV is specified as development by default.

sideEffects

This configuration can greatly reduce the packaging volume. When the module's package.json is configured with sideEffects:false, it indicates that the module has no side effects, which means that webpack can safely clean up the code used for re-exports.

Module Type

webpack4 provides 5 module types.

json: JSON format data that can be imported through
requireand import (default is .json file)
webassembly: WebAssembly module, (currently the default type for .wasm files)
javascript/auto: (the default type in webpack 3) supports all JS Module system: CommonJS, AMD.
javascript/esm: EcmaScript module (default .mjs file).
javascript/dynamic: Only supports CommonJS & AMD.

JSON

#webpack 4 not only supports native processing of JSON, but also supports Tree Shaking of JSON. When using ESM syntax to import json, webpack will eliminate unused exports in the JSON Module. In addition, if you want to use loader to convert json to js, you need to set type to javascript/auto.

#optimization

Webpack 4 removed the CommonsChunkPlugin and enabled many of its features by default. Therefore webpack4 can achieve good default optimization. However, for those requiring custom caching strategies, optimization.splitChunks and optimization.runtimeChunk were added. For specific explanation, please refer to this article, which is explained in detail. RIP CommonsChunkPlugin click preview

Step by step upgrade

I upgraded the original vue cli project. Generally speaking, the upgrade was relatively smooth. Here we divide it into two steps. , first upgrade the relevant dependent plug-ins, and then optimize the webapck

config file.

Upgrade plug-ins

First, upgrade the plug-ins listed below to the corresponding version or the latest version

webpack@4.4.1
css-loader@0.28.10,

extract-text-webpack-plugin@4.0.0-beta.0,file-loader@1.1.11,
html- webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware@3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2

If you encounter errors from other packages, it should be solved by upgrading to the latest one. .

Update configuration file

webpack.dev.conf.js

dev环境变化不大，毕竟webpack4很大一部分的优化都是针对生产环境的，该文件我们只需要删除一些不再需要的插件既可以。例如：webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin，其功能webpack4已经默认配置。同时，要设置

mode: 'development'
webpack.production.conf.js

webvpack4中改动最大，影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分，webpack runtime之类的代码，结合chunkhash，实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能，并且配置更加灵活，具体解释可参考这篇文章，解释得很详细。

mode: 'production', optimization: { 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' } }

Copy after login

总结

总体来说本次升级还算顺利，不到一天搞定，目前感觉，打包速度大约优化了70%左右，同时打包后的代码体积也有了很大的优化，带来的效果很显著的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！