Webpack 4 升级指南与从 v3 迁移实战

Webpack 4 升级背景与概述

日前，Webpack 发布了 v4.0.0 版本，引入了诸多重大变更，例如零配置模式以及移除 CommonsChunkPlugin 等。这引发了一个关键问题：原有的 Webpack 3.x 项目应如何迁移至新版本？本文将基于一个由 Vue CLI 创建的标准 Webpack 项目，详细演示迁移过程。

补充说明：虽然“零配置”听起来颇具吸引力，但它通常无法满足复杂项目的具体需求。不过，Webpack 4 确实增加了更多默认配置，简化了基础设置，提供了一种开箱即用的体验。此前 Parcel 的零配置功能曾对 Webpack 构成挑战，笔者也尝试使用 Parcel 配合 Vue 构建了简单模板，感兴趣者可参考相关实践。

Webpack 4 核心新特性解析

一、Webpack 4 的新特性

0. 安装方式变更

仅安装 webpack 已不再足够，必须额外安装 webpack-cli：

全局安装方式

sudo npm install -g webpack webpack-cli

局部安装（当前项目目录）

npm install --save-dev webpack webpack-cli

1. 零配置模式

默认入口文件为 './src/' ，默认输出目录为 './dist'；

关于压缩（optimization.minimize）的设置，默认在 production 模式下开启，在 development 模式下关闭。

上述仅为默认配置的一部分，其他默认项还包括许多优化设置。

2. mode 参数与 --mode 选项

新增的 mode（或 --mode）参数用于区分开发环境还是生产环境。该参数有两个可选值：development 和 production。其中，production 模式不支持监听文件变化，侧重于优化打包后的文件大小；development 模式则侧重于构建速度。

webpack --mode development

也可以在配置文件中直接指定：

// webpack.config.js
module.exports = {
 mode: "production",
 // ...
}

3. UglifyJS 升级

在之前由 Vue 脚手架生成的基于 Webpack 的工程中，webpack.prod.conf.js 配置文件中可见如下注释：

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify

在 Webpack 4.0 中，已原生支持压缩 ES6 代码，例如：

class user {
 getUsername() {
  // to do
 }
}

压缩后的结果为：

4. 移除 loaders，强制使用 rules

在 Webpack 3.x 中，旧版的 loaders 配置与新的 rules 并存均可使用。但在 Webpack 4 中，完全移除了 loaders 配置方式，必须统一使用 rules。

5. sideEffects 优化

在模块的 package.json 中添加 sideEffects: false，当使用 export 单独导出时，打包工具不会打包 export 之外的其他文件，从而减小打包体积。

相关链接：https://github.com/webpack/webpack/tree/master/examples/side-effects

6. webpack4支持多种形式的模块类型，但是有时候可能需要加上type进行配合

若涉及 CommonJS、AMD、ESM 三种类型的模块，使用 javascript/auto；

若涉及 EcmaScript modules（.mjs），使用 javascript/esm，其他模块类型将不生效；

若仅包含 CommonJS 且 EcmaScript modules 不可用时，使用 javascript/dynamic；

若处理 json 类型文件，允许使用 require 和 import 导入 json，使用 json；

若处理 Webassembly，使用 webassembly/experimental —— 官方标注为实验性功能。

配置示例：

rules: [
 {
  test: /\.json$/,
  type: "javascript/auto"
 }
]

7. 支持以 ES6 方式导入 JSON 文件，并支持 Tree Shaking 过滤无用代码

以下是三种导入 json 文件的方法：

let jsonData = require('./data.json');

import jsonData from './data.json'

import { first } from './data.json'

其中，使用 import { first } from './data.json' 引入的 json 文件会忽略未导入的代码，打包时仅包含 first 字段。

8. 移除 CommonsChunkPlugin，改用 optimization.splitChunks 和 optimization.runtimeChunk

此部分内容较多，此处不做详细介绍，后续可能会单独撰写关于 optimization.splitChunks 的文章。在下文从 3.x 迁移的部分会有简要介绍。除了上述新版 release 链接外，还推荐以下参考资料：

RIP CommonsChunkPlugin medium上的有关移除CommonsChunkPlugin的文章 medium上的有关webpack4更新文章

从 Webpack 3.x 迁移至 4.x 实战步骤

二、从 Webpack 3.x 迁移至 Webpack 4.x

1. 更新 Webpack 依赖

npm install -g webpack webpack-cli

npm install --save-dev webpack webpack-cli

2. 更新相关模块

在升级 Webpack 的同时，许多相关依赖也需相应升级。以下是在 Vue CLI 脚手架中需要更新的依赖；对于其他项目，请留意控制台报错，根据报错插件进行升级，若遇到模块找不到等错误，则需升级对应的 loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server 或改为 webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next
…

3. 使用 mode 或 --mode 参数

在命令中加入 --mode development 或 --mode production，或在配置文件中加入 mode: 'development' / mode: 'production'。

4. 若使用 CommonsChunkPlugin，需替换为 optimization.splitChunks

配置示例：

const webpack = require('webpack')；

new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
  }
 }
})

迁移注意事项与总结

写在后面

本次 Webpack 升级涉及内容众多，本文仅列举了几个关键点，详细内容可查阅官方文档。从 Webpack 3.x 迁移至新版时可能还会遇到其他问题，需逐步排查解决，目前遇到的主要问题均已处理完毕。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。