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
- java枚举类型enum的使用
- (66) 理解synchronized / 计算机程序的思维逻辑
- 用Python搭建一个校园维基网站(一)
- (67) 线程的基本协作机制 (上) / 计算机程序的思维逻辑
- 制作Aspose CHM文档的过程记录
- 用python搭建一个校园维基网站(二)—— 可编辑内容的首页的创建
- Django博客教程(四):让 django 完成翻译—迁移数据库模型
- Calendar类中add/set/roll方法的区别
- 如何构建一个分布式爬虫(理论篇)
- Python微型Web框架Bottle源码分析
- VirtualBox相关问题总结
- Java 枚举7常见种用法
- ALI的Tensorflow炼成与GAN科普
- LaTeX内容总结
- 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 数组属性和方法
- DC-1靶机实战和分析
- 如何用Python优雅的登录校园网?
- PHP入门之类型与运算符
- 栈论 : 递归与栈式访问,如何用栈实现所有递归操作(幼儿园题目篇,题目3)
- Maven是什么? Maven的概念+作用+仓库的介绍+常用命令
- JDK8;HashMap:再散列解决hash冲突 ,源码分析和分析思路
- 写一个 Singleton
- 树莓派基础实验31:MPU6050陀螺仪加速度传感器实验
- springboot gradle mybatis mysql配置(注解)
- PHP入门之流程控制
- 常用进制转换方法(取商留余)原理解析, 附基于栈实现进制转换的代码
- 用 jdom 解析 xml 文件时如何解决中文问题?如何解析?
- PHP入门之函数
- spring boot 启动报错 org/springframework/core/ErrorCoded
- PHP入门之数组