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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
webpack的移动端适配方案小结
Jul 25 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
ADODB的数据库封包程序库
2006/12/31 PHP
MySQL中create table语句的基本语法是
2007/01/15 PHP
PHP Pear 安装及使用
2009/03/19 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python实现去除代码前行号的方法
2015/03/10 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
大学班级学风建设方案
2014/05/01 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
初中家长评语大全
2014/12/26 职场文书
教师个人年度总结
2015/02/11 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL