CY

使生如夏花之绚烂,死如秋叶之静美

  1. 1. 升级 webpack
  2. 2. 修改配置
    1. 2.1. 添加 mode
    2. 2.2. CommonsChunkPlugin 的弃用
    3. 2.3. extract-text-webpack-plugin 将不再支持
  3. 3. 总结

全新的 webpack(4)来了,带来了全新的特性,更快的性能,更少的配置,先来升级踩波坑吧!

升级 webpack

直接卸载重装最新!

1
2
yarn remove webpack webpack-dev-server
yarn add webpack webpack-cli

webpack 4 必须安装 CLI

官方的介绍是这样的:
不安装将会报 error。

修改配置

添加 mode

webpack 默认提供 mode 选项
值为 development(开发环境) || production(生产环境)
不需要自行判断是生产环境还是开发环境,直接在配置下增加字段。
development:默认启用 热加载/缓存 等。
production: 默认启用代码压缩等功能。
mode: development || production

CommonsChunkPlugin 的弃用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// webpack3
new webpack.optimize.CommonsChunkPlugin({
names: ['common','vendor'],
filename: './common/[name].bundle.js',
minChunks: 2,
})

// webpack4
optimization: {
minimize: true,
splitChunks: {
maxAsyncRequests: 5,
maxInitialRequests: 3,
minChunks: 2,
cacheGroups: {
default: false,
commons: {
filename: './commons/[name].[hash:8].js',
name: "commons",
chunks: "initial",
minChunks: 2
},
vendor: {
test: /node_modules/,
filename: './vendor/[name].[hash:8].js',
name: "vendor",
chunks: "initial",
minChunks: 1
}
}
}
}

extract-text-webpack-plugin 将不再支持

改用 MiniCssExtractPlugin 这个插件,具体内如可查看官方 Issue 。

1
yarn add mini-css-extract-plugin

配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins:[
...
new MiniCssExtractPlugin({
filename: "./css/[name].[hash:8].css",
//chunkFilename: "[name].css"
})
]
....
modules: {
....
rules: [
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
//因为上面设置了 /css/ 目录
//Issue:https://github.com/webpack-contrib/mini-css-extract-plugin/issues/44#issuecomment-379059788
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
minimize: true,
outputPath: './css/',
}
},
{loader: 'postcss-loader'},
}]
}

总结

webpack4 官方 CHANGELOG

  1. entry :默认为 src/index
  2. output:默认为 dist
  3. 新增 mode:为 production 和 development (必选)
  4. 默认热加载
  5. 新增 cli
  6. 生产环境默认开启了很多代码优化( minify,splite 等),即不需要 UglifyJsPlugin
  7. CommonsChunkPlugin 删除,改用 optimization.splitChunks

本文作者 : CY
本文使用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
本文链接 : https://runtua.cn/2018/09/20/migration-guide-for-webpck4/

本文最后更新于 天前,文中所描述的信息可能已发生改变