本篇目录:

  • 先升级webpack-cli
  • 遇到的问题
    • 问题1:compilation.mainTemplate.applyPluginsWaterfall is not a function
      • 问题描述
      • 暂时解决方案
    • 问题2:Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
      • 问题描述
      • 解决方案
    • 问题3:webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
      • 问题描述
      • 解决方案
      • 附注
  • 小结

先升级webpack-cli

执行命令如下:

1
2
3
4
npm install webpack-cli -D
或者
npm install -g yarn
yarn add webpakc-cli -D

遇到的问题

问题1:compilation.mainTemplate.applyPluginsWaterfall is not a function

问题描述

问题截图

暂时解决方案
1
yarn add webpack-contrib/html-webpack-plugin -D

相关讨论参照这里

问题2:Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

问题描述

问题截图

解决方案
1
去除,require(‘extract-text-webpack-plugin’)的引用

或者

1
npm install extract-text-webpack-plugin@next

问题3:webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

问题描述

问题截图

解决方案

4.x中已经删除CommonsChunkPlugin,替换成了splitChunks,这里有相关介绍内容

去除new webpack.optimize.CommonsChunkPlugin,修改为

1
2
3
4
5
6
7
8
9
10
11
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
}
附注

optimization参数介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
optimization: {
splitChunks: {
chunks: "initial", // 必须三选一: "initial" | "all"(默认就是all) | "async"
minSize: 0, // 最小尺寸,默认0
minChunks: 1, // 最小 chunk ,默认1
maxAsyncRequests: 1, // 最大异步请求数, 默认1
maxInitialRequests: 1, // 最大初始化请求书,默认1
name: () => {}, // 名称,此选项课接收 function
cacheGroups: { // 这里开始设置缓存的 chunks
priority: "0", // 缓存组优先级 false | object |
vendor: { // key 为entry中定义的 入口名称
chunks: "initial", // 必须三选一: "initial" | "all" | "async"(默认就是异步)
test: /react|lodash/, // 正则规则验证,如果符合就提取 chunk
name: "vendor", // 要缓存的 分隔出来的 chunk 名称
minSize: 0,
minChunks: 1,
enforce: true,
maxAsyncRequests: 1, // 最大异步请求数, 默认1
maxInitialRequests: 1, // 最大初始化请求书,默认1
reuseExistingChunk: true // 可设置是否重用该chunk(查看源码没有发现默认值)
}
}
}
},

小结

本篇参照资料:

Webpack3.x-Webpack4.x升级记录