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实现禁止后退的方法
Dec 27 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
Jun 29 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
原生JS实现音乐播放器的示例代码
Feb 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
输出控制类
2006/10/09 PHP
服务器web工具 php环境下
2010/12/29 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php接口隔离原则实例分析
2019/11/11 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
python列表操作使用示例分享
2014/02/21 Python
Python描述器descriptor详解
2015/02/03 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
2015年学校办公室主任工作总结
2015/07/20 职场文书
新年祝酒词大全
2015/08/11 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
Python制作动态字符画的源码
2021/08/04 Python