What steps are needed for vue cli+webapck4

This time I will bring you the steps required for vue cli webapck4, and what are the precautions for vue cli 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 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 selection mode

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.

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 systems: 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 related dependent plug-ins, and then optimize the webapck configuration 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

The dev environment has not changed much. After all, a large part of the optimization of webpack4 is for In the production environment, we only need to delete some plug-ins that are no longer needed in this file. For example: webpack.NamedModulesPlugin, webpack.NoEmitOnErrorsPlugin, whose functions webpack4 has been configured by default. At the same time, set

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中文网其它相关文章！

推荐阅读：

使用mint-ui在手机端做出三级联动

怎样发布vue+todo-list应用

The above is the detailed content of What steps are needed for vue cli+webapck4. For more information, please follow other related articles on the PHP Chinese website!