我的 Webpack(4)升级指南

全新的 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
分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理