webpack3 升级到 webpack4 小记
背景
团队开发的时候,发现启动项目服务 npm run dev
很慢,我试了一下,要三四十秒,这对于我们开发来讲,会导致开发效率下降很多,而我们目前使用的是 webpack3
,所以我想尝试通过升级 webpack
来提升一下编译打包的速度
注:代码大部分参照网络,可以在后面看到链接
调研
webpack3
升级到 webpack4
的话,还是做了很大的改动,我查询资料总结如下(当然不止以下改动):
升级过程遇到的问题以及解决
问题 一
Error: webpack.optimize.CommonsChunkPlugin has been removed, please useconfig.optimization.splitChunks instead.
解决方法:
在 webpack4
中不再支持 CommonsChunkPlugin
,而是使用 splitChunks
替代,那么这两者有什么区别?为什么要废弃之前的,使用 splitChunks
的呢?
这里纸上谈兵一下
根据我查到的资料显示, CommonsChunkPlugin
存在以下的问题:
-
CommonsChunkPlugin
会提取一些我们不需要的代码 - 它在异步模块上效率低下
- 很难使用,配置也很难理解
相比, splitChunks
具有以下特点:
- 它不会打包不需要的模块
- 对异步模块有效(默认情况下是打开的)
- 更加容易使用和更加自动化
我们平时配置 CommonsChunkPlugin
如下:
-
new webpack.optimize.CommonsChunkPlugin({
-
name:
'vendor',
-
// 引入node_modules的依賴全抽出來
-
minChunks:
function
(module, count)
{
-
// any required modules inside node_modules are extracted to vendor
-
return
(
-
module.resource &&
-
/.js$/.test(module.resource)
&&
-
module.resource.indexOf(
-
path.join(__dirname,
‘../node_modules‘)
-
)
===
0
-
)
-
}
-
// 或者直接minChunks: 2,重復模塊大於2的全部抽出來
-
})
平时使用 splitChunks
如下
-
optimization:
{
-
splitChunks:
{
-
// 抽離入口文件公共模塊為commmons模塊
-
cacheGroups:
{
-
commons:
{
-
name:
"commons",
-
chunks:
"initial",
-
minChunks:
2
-
}
-
}
-
}
-
}
问题 二
Error:
Plugin could not be registered at 'compile'.
Hook was not found. BREAKING CHANGE:There need to exist a hook at 'this.hooks'.
To create a compatibility layer for
this hook,hook into
'this._pluginCompat'.
解决方法:
这个问题是依赖版本的问题,将 webpack-dev-server
升级到 3.1.0
就可以解决了。
npm i webpack-dev-server@3.1.0
-D
问题三
Error:
Chunk.entrypoints:
Use
Chunks.groupsIterable and filter by
instanceof
Entrypointinstead
解决方法:
这个是因为 webpack 4
不再 支持 extract-css-chunks-webpack-plugin
,我们可以使用 mini-css-extract-plugin
替代
-
-const
ExtractCssChunks
=
require('extract-css-chunks-webpack-plugin')
-
+const
MiniCssExtractPlugin
=
require("mini-css-extract-plugin");
-
module.exports =
{
-
name:
'client',
-
target:
'web',
-
module:
{
-
rules:
[
-
{
-
test:
/.css$/,
-
-
use:
ExtractCssChunks.extract({
-
-
use:
'css-loader'
-
-
})
-
+
use:
[
-
+
{
-
+ loader:
MiniCssExtractPlugin.loader,
-
+
},
-
+
"css-loader"
-
+
]
-
}
-
]
-
},
-
//
-
// other config........
-
//
-
plugins:
[
-
-
new
ExtractCssChunks(),
-
+
new
MiniCssExtractPlugin({
-
+ filename:
`components/[name].css`
-
+
}),
-
//
-
// other config........
-
//
-
]
问题 4
Error:
Chunk.initial was removed.
Use canBeInitial/isOnlyInitial() at Chunk.get initial
解决方法:升级 "webpack-manifest-plugin":
"^1.3.2"
到 "webpack-manifest-plugin":
"^2.0.4"
问题 5
Error: webpack.optimize.UglifyJsPlugin has been removed, please useconfig.optimization.minimize instead.
解决方法:
webpack 4
已经废除了 之前 UglifyJsPlugin
,用 optimization.minimize
替代
修改前:
-
plugins:
[
-
new webpack.optimize.UglifyJsPlugin({
-
sourceMap:
true,
-
compress:
{
-
warnings:
false,
-
},
-
}),
-
]
修改后:
-
const
UglifyJsPlugin
=
require('uglifyjs-webpack-plugin');
-
optimization:
{
-
minimizer:
[
-
new
UglifyJsPlugin({
-
sourceMap:
true,
-
compress:
{
-
warnings:
false,
-
},
-
}),
-
],
-
}
问题6
WARNING in configuration The
'mode' option has not been set, webpack will fallback to'production'
for
this value.
Set
'mode' option to 'development'
or
'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior.Learn more: https://webpack.js.org/concepts/mode/
解决方法:
这是一个 warnning
, webpack 4
一些默认的配置需要通过 mode
配置启用,这个配置项有三个配置值, development
、 production
和 none
,默认为 none
,借用官网的一张图了解下它们的区别:
我们可以设置如下:
-
"dev":
"webpack --mode development",
-
"build":
"webpack --mode production"
这样我们就可以不用使用 cross-env
和 DefinePlugin
去做生产环境和开发环境的判别,我们可以直接使用 process.env. NODE_ENV
的值进行判别,开发环境值下为 development
,生产环境下值为 production
结果
经过一轮升级下来,终于没有报错了,我们来看下有没有达到我们的目标
之前的 npm run dev
升级之后的 npm run dev
才提升 8s,不得不说,问题根源并不在于此,除了升级 webpack
之外,肯定是还有其他方面性能优化的点,比如 dll
, happy pack
等等,下一篇文章我们就来探讨一下这些优化的手段
参考:
https://www.itread01.com/content/1532241616.html
https://stackoverflow.com/questions/51383618/chunk-entrypoints-use-chunks-groupsiterable-and-filter-by-instanceof-entrypoint
https://github.com/wuweijia/wuweijia.github.io/issues/46
https://webpack.js.org/configuration/mode/#root
- [快学Python3]模块和包
- 除法取模与逆元/费马小定理
- [快学Python3]类基础
- 邻接矩阵存储有向图(详解)
- [快学Python3]二分查找[策略优化版本]
- 使用 zipfile 解压含有中文文件名的 zip 文件
- qsc oj 22 哗啦啦村的刁难(3)(随机数,神题)
- [快学Python3]数据结构与算法-二分查找
- [快学Python3]数据结构-队列
- 51Nod 1090 3个数和为0(暴力)
- qscoj 128 喵哈哈村的魔法源泉(2)(模仿快速幂,好题)
- POJ 3624 Charm Bracelet(01背包裸题)
- 2015 计蒜之道 初赛(4)爱奇艺的自制节目(枚举 贪心)
- Codeforces 810C Do you want a date?(数学,前缀和)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用Python全自动下载抖音视频!
- 如何实现一个高效的启发式算法?
- Python数据可视化:豆瓣电影TOP250
- 容器化 FRP 使用方案
- 任意图像转素描:Python分分钟实现
- Python数据科学:相关分析
- Python数据科学:正态分布与t检验
- Python数据科学:方差分析
- 推荐3个开源的快速开发平台,前后端都有,项目经验又有着落了!
- Python数据科学:卡方检验
- Java 中使用 Redis
- Python数据科学:线性回归
- 人生苦短,我用k8s--------------单节点二进制部署
- 人生苦短,我用k8s--------------k8s集群二进制部署
- 从零开始学习 JD Chain(四)-使用穿透式检索-Release