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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
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
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python的Django框架中的表单处理示例
2015/07/17 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
关于Python错误重试方法总结
2021/01/03 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
党日活动总结
2014/05/07 职场文书
成立公司计划书
2014/05/07 职场文书
大学生操行评语大全
2014/12/31 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
Python打包为exe详细教程
2021/05/18 Python
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL