How to use vue cli to upgrade webapck4

This time I will bring you how to use vue cli to upgrade webapck4. What are the precautions when using vue cli to upgrade webapck4. 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 not satisfied with the packaging speed of webpack3, so I decided to upgrade the project I am currently working on, and I just want to practice 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, such as code compression and scope promotion, will be made by default, 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.

1. json: JSON format data that can be imported through require and import (default is .json file)

2. webassembly: WebAssembly module, (currently the default type for .wasm files)

3. javascript/auto: (default type in webpack 3) supports all JS Module system: CommonJS, AMD.

4. javascript/esm: EcmaScript module (default .mjs file).

5. 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 webapckconfiguration 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' }
}

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

推荐阅读：

vue.js实现操作class的方法

vue的todo-list组件怎么发布到npm

The above is the detailed content of How to use vue cli to upgrade webapck4. For more information, please follow other related articles on the PHP Chinese website!