将create react app wepback3升级到webpack4(本人实践)

z__weizhan

于 2020-03-13 12:02:08 发布

阅读量620

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack javascript 前端

本文链接：https://blog.youkuaiyun.com/zhuangweizhan/article/details/104837929

本文提供了一步步将基于create react app的项目从webpack3升级到webpack4的详细过程，包括安装指定版本的webpack、调整插件顺序、优化配置等关键步骤，并解决了在升级过程中遇到的missingDeps、eslint等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

create react app
webpack3升级webpack4操作指南。

本文参考链接：https://zhuanlan.zhihu.com/p/45506253

1. 安装webpack4.0
官方升级命令：
yarn add webpack webpack-cli webpack-dev-server

但本人项目执行的时候遇到问题，后解决推荐搭配为版本为：
- npm i webpack@4.16.5
- npm i webpack-cli@3.1.0
- npm i html-webpack-plugin@3.2.0

2.webpack3跟webpack4的执行顺序不一直。
需要将InterpolateHtmlPlugin放置HtmlWebpackPlugin后边。
结果：
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new InterpolateHtmlPlugin(env.raw)

3.UglifyJsPlugin插件。
UglifyJsPlugin为webpack3压缩代码使用，而webpack4已经自带，只需配置一下optimization即可。
删除UglifyJsPlugin.
optimization: {
minimizer: [
new TerserPlugin({ // 压缩js
cache: true,
parallel: true //开启多线程
}),
new Opt