webpack@v4升级踩坑(小结)

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

查阅更新日志

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

在命令行界面运行打包指令需要安装 webpack-cli ;

打包需要指定打包模式 production or development ,在不同模式下会添加不同的默认配置, webpack.DefinePlugin 插件的 process.env.NODE_ENV 的值不需要再定义,将根据模式自动添加;

不再需要在 plugin 中设置 new webpack.optimize.UglifyJsPlugin ,只需要在配置中设置开关即可,并且 production 模式自动开启,可以通过 optimization.minimizer 指定其他压缩库;

删除了 CommonsChunkPlugin ,功能已迁移至 optimization.splitChunks , optimization.runtimeChunk。

迁移

安装最新的 webpack 、 webpack-cli 、 webpack-dev-server ;

为开发中和发布分别配置 mode ,删除 webpack.DefinePlugin 配置,并且去掉 package.json 中启动脚本的 NODE_ENV 区别环境变量定义;

去掉 new webpack.optimize.UglifyJsPlugin 、 ModuleConcatenationPlugin 配置。

爬坑

webpack@v4升级踩坑(小结)

在这些配置好之后我遇到的第一个问题就是打包时 extract-text-webpack-plugin 插件炸了!这里提供了这里有两种解决方案:

方法一:安装指定 extract-text-webpack-plugin 版本 @next ;

方法二:使用 mini-css-extract-plugin 替代。

如果使用方法二注意在发布打包时需要指定 css 压缩库配置,并且需要同时写入 js 压缩库,因为你一旦指定了 optimization.minimizer 就会弃用内置的代码压缩:

/* webpack.config.js */ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = () => { const config = { module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader?importLoaders=1', 'postcss-loader' ] }, { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader?importLoaders=1', 'postcss-loader', 'less-loader' ] } ] }, resolve: { extensions: ['.js', '.jsx', '.less'] } }; if (process.env.NODE_ENV === 'development') { config.module.rules[0].use = [ 'css-hot-loader', MiniCssExtractPlugin.loader, 'css-loader?importLoaders=1', 'postcss-loader' ]; config.module.rules[1].use = [ 'css-hot-loader', MiniCssExtractPlugin.loader, 'css-loader?importLoaders=1', 'postcss-loader', { loader: 'less-loader', options: { modifyVars: theme } } ]; } return config; }; /* webpack.config.prod.js */ const merge = require('webpack-merge'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const webpackBaseConfig = require('./webpack.config')(); module.exports = merge(webpackBaseConfig, { mode: 'production', optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, uglifyOptions: { compress: { warnings: false, drop_debugger: true, drop_console: false } } }), new OptimizeCSSAssetsPlugin({}) ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].css' }) ] });

happypack 炸了,小场面,升级就好 @5.0.0-beta.3(happypack 和 extract-text-webpack-plugin 搭配使用更佳,mini-css-extract-plugin 未测试)。webpack-browser-plugin 炸了,小场面,弃用就好,然后在 devServer 中配置 open 和 openPage 。

上面的配置中可以看到我使用判断语句 process.env.NODE_ENV === 'development' 在开发配置中加入了 css-hot-loader ,但是这里实际上是获取到的是 undefined ,咦?这是什么鬼?查阅更新日志是怎么说的:

process.env.NODE_ENV are set to production or development (only in built code, not in config)

意思就是说我们在使用的工程项目代码中会获取到这个变量,但是打包配置中使用这个变量还是获取不到的,我也实际验证了这个结果,so,我在 package.json 的开发启动脚本中还是加上了 NODE_ENV='development' 。

最后

总体来说现在的升级时机已经成熟,大多需要用到的功能和插件都有平滑的升级或替代方案,建议在开始升级前安装最新发布的插件版本,也可以参考下我的项目配置react-with-mobx-template

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/b3490a9b169143188c610971192c0040.html