详解基于Vue cli生成的Vue项目的webpack4升级

前面的话

本文将详细介绍从webpack3到webpack4的升级过程

概述

相比于webpack3，webpack4可以零配置运行，打包速度比之前提高了90%，可以直接到ES6的代码进行无用代码剔除，新增的optimization使用简单

在未来，CSS、HTMl和文件都会成为原生模块

【0配置】

webpack4 设置了默认值，以便无配置启动项目

entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production

【模块类型】

webpack4提供了5种模块类型

json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件) webassembly: WebAssembly 模块，（目前是 .wasm 文件的默认类型） javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统：CommonJS、AMD。 javascript/esm: EcmaScript模块（默认 .mjs 文件）。 javascript/dynamic: 仅支持 CommonJS & AMD。

webpack 4 不仅支持本地处理 JSON，还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时，webpack 会消除掉JSON Module 中未使用的导出。此外，如果要用 loader 转换 json 为 js，需要设置 type 为 javascript/auto

模式mode

相比于webpack3，webpack4新增了一个mode配置选择，用来表示配置模式的选择情况

module.exports = { mode: 'production'}

包括生产环境production、开发环境devolopment和自定义none这三个选择可选

【开发模式】

浏览器调试工具 注释、开发阶段的详细错误日志和提示 快速和优化的增量构建机制 开启 output.pathinfo 在 bundle 中显示模块信息 开启 NamedModulesPlugin 开启 NoEmitOnErrorsPlugin

【生产模式】

启用所有优化代码的功能 更小的bundle大小 去除只在开发阶段运行的代码 关闭内存缓存 Scope hoisting 和 Tree-shaking 开启 NoEmitOnErrorsPlugin 开启 ModuleConcatenationPlugin 开启 optimization.minimize

【none】

禁用所有的默认设置

optimization

从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，下面来介绍optimization下的一些常用配置项

【minimize】

利用unglifyjsWebpackPlugin插件来压缩模块，生产环境下该值默认为true

optimization: {  minimize: false }

【minimier】

可以使用其他插件来执行压缩功能

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = { //... optimization: {  minimizer: [   new UglifyJsPlugin({ /* your config */ })  ] }};

【splitChunks】

webpack4默认使用splitChunksPlugin插件来实现代码分割功能，来替代webpack3中的commonChunksPlugin插件

module.exports = { //... optimization: {  splitChunks: {   chunks: 'async',   minSize: 30000,   minChunks: 1,   maxAsyncRequests: 5,   maxInitialRequests: 3,   automaticNameDelimiter: '~',   name: true,   cacheGroups: {    vendors: {     test: /[///]node_modules[///]/,     priority: -10    },    default: {     minChunks: 2,     priority: -20,     reuseExistingChunk: true    }   }  } }