webpack@v4升级踩坑(小结)


Posted in Javascript onOctober 08, 2018

之前看到各大公众号都在狂推 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

迁移

  1. 安装最新的 webpackwebpack-cliwebpack-dev-server
  2. 为开发中和发布分别配置 mode ,删除 webpack.DefinePlugin 配置,并且去掉 package.json 中启动脚本的 NODE_ENV 区别环境变量定义;
  3. 去掉 new webpack.optimize.UglifyJsPluginModuleConcatenationPlugin 配置。

爬坑

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.3happypackextract-text-webpack-plugin 搭配使用更佳,mini-css-extract-plugin 未测试)。webpack-browser-plugin 炸了,小场面,弃用就好,然后在 devServer 中配置 openopenPage

上面的配置中可以看到我使用判断语句 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。

还有对插件的一些 API 也做了一些更改,如果你是插件开发者也可以尝试发布新的插件版本,我在使用自己的版本号提取插件webpack-version-plugin时发现 compiler.plugin 已经被提示过气了, webpack@v4 使用最新的 compiler.hooks.emit.tap 触发事件,嗯,最后的这部分广告真硬!

Javascript 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
npm scripts 使用指南详解
Oct 08 #Javascript
webpack4.0 入门实践教程
Oct 08 #Javascript
vue实现一个炫酷的日历组件
Oct 08 #Javascript
angularJs利用$scope处理升降序的方法
Oct 08 #Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 #Javascript
vue页面切换过渡transition效果
Oct 08 #Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 #Javascript
You might like
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
js识别uc浏览器的代码
2015/11/06 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
详解package.json版本号规则
2019/08/01 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
python3实现表白神器
2019/04/09 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
渗透攻击的测试步骤
2014/06/07 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
动漫设计与制作专业推荐信
2014/07/07 职场文书
初中家长评语和期望
2014/12/26 职场文书
会议主持词开场白
2015/05/28 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Springboot中如何自动转JSON输出
2022/06/16 Java/Android