之前看到各大公众号都在狂推工具新版发布的相关内容，之前就尝试了升级，由于部分插件的原因，未能成功，现在想必过了这么久已经可以了，今天就来试一下在我的项目中升级会遇到哪些坑。

查阅更新日志

在安装更新之前，先大致浏览了一下更新日志，对大部分用户来说迁移上需要注意的应该就是这些点：

在命令行界面运行打包指令需要安装网络包-命令行界面；打包需要指定打包模式生产或开发，在不同模式下会添加不同的默认配置，网络包。定义替换插件的process.env.NODE_ENV的值不需要再定义，将根据模式自动添加；不再需要在插件中设置新的网络包。优化。uglifyjsplugin，只需要在配置中设置开关即可，并且生产模式自动开启，可以通过优化。最小化指定其他压缩库；删除了CommonsChunkPlugin，功能已迁移至优化。分割块，优化。运行时块。迁移

安装最新的webpack、webpack-cli、web pack-dev-server；为开发中和发布分别配置模式，删除网络包。定义替换配置，并且去掉package.json中启动脚本的NODE_ENV区别环境变量定义；去掉新的网络包。优化。uglifyjsplugin、ModuleConcatenationPlugin配置。爬坑

在这些配置好之后我遇到的第一个问题就是打包时提取-文本-网络包-插件插件炸了！这里提供了这里有两种解决方案：

方法一：安装指定提取-文本-网络包-插件版本@下一个方法二：使用迷你钢性铸铁提取插件替代。如果使用方法二注意在发布打包时需要指定钢性铸铁压缩库配置，并且需要同时写入射流研究…压缩库，因为你一旦指定了优化。最小化就会弃用内置的代码压缩：

/*网络包。配置。js */const miniss tract plugin=require(' mini-CSS-extract-plugin ')；模块。exports=()={ const config={ module : { rules 3360 [{ test :/ } .css$/，使用：[minisextractlugin。加载程序，css加载程序？importLoaders=1 '，' postss-loader ']}，{ test: / .减$/,使用：[minisextractlingplugin。加载程序，css加载程序？importLoaders=1 '，' postss-loader '，' less-loader ']}，解析： {扩展名s 3360[].js '，' .jsx '，' .小于']} };if(过程。ENV。NODE _ ENV==' development '){ config。模块。规则[0].use=[ 'css-hot-loader '，MiniCssExtractPlugin.loader，' css-loader？importLoaders=1 '，' postss-loader ']；config.module.rules[1]。use=[ 'css-hot-loader '，MiniCssExtractPlugin.loader，' css-loader？importLoaders=1 '，' postss-loader '，{ loader: 'less-loader '，options 3360 { modify var : theme } }]；}返回配置；};/*网络包。配置。产品。js */const merge=require(' web pack-merge ')；const UglifyJsPlugin=require(' uglifyjs-web pack-plugin ')；const miniss tract plugin=require(' mini-CSS-extract-plugin ')；const optimizecsassesplugin=require(' optimize-CSS-assets-web pack-plugin ')；const web packkkbaseconfig=require(' ./web pack。config ')()；模块。exports=merge(webpackkkbaseconfig，{ mode: 'production '，optimization : { minimizer :[new UglifyJsPlugin({ cache : true，parallel: true，uglifyooptions 3360 { compression : { warnings : false，drop _ debugger: true，drop _ console: false } })，new optimizacessplugin({ })}，plugCSS ' })happypack炸了，小场面，升级就好@5.0.0-beta.3(happypack和提取-文本-网络包-插件搭配使用更佳，迷你CSS-提取-插件未测试)。网络包-浏览器-插件炸了，小场面，弃用就好，然后在devServer中配置打开和openPage。

从上面的配置可以看出，我是用判断语句process . env . node _ env==' development '在开发配置中添加了css-hot-loader，但是我这里实际得到的是未定义的，嗯？这到底是什么？参考更新日志说了什么：

过程的意义。环境。node _ env设置为production或development(仅在内置代码中，而不是在config中)的原因是，我们可以在使用过的工程项目代码中获得这个变量，但在打包的配置中使用这个变量时，我们无法获得它。我实际上验证了这个结果，所以，我在package.json的开发启动脚本中添加了NODE_ENV='development '

最后的

总的来说，现在升级时机已经成熟，大部分需要用到的功能和插件都有了流畅的升级或者替代。建议升级前安装最新版本的插件，或者参考我的项目配置react-with-mobx-template。

插件的API也有一些变化。如果你是一个插件开发者，你也可以尝试发布一个新的插件版本。当我用自己的版本号提取插件webpack-version-plugin时，我发现compiler.plugin已经被提示了。[emailprotected]使用最新的编译器. hooks.emit.tap来触发事件。嗯，广告的最后一部分真的很难！