webpack3.0升级4.0的方法步骤


Posted in Javascript onApril 02, 2020

1.webpack 3.11升级4.26

为了提升打包效率,在webpack3.11基础之上做了升级,webpack4.0发布以来,零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化,如果在项目开始使用4.0而不用vue-cli的默认配置,遇到的问题或许能少一些。

2. 安装/升级依赖

这些依赖有的是在build过程中发现依赖有新的替换或者报错,逐步替换的,如果想遇到多个坑,可以先把webpack、webpack-cli升级到对应版本

devDependencies:

"extract-text-webpack-plugin": "^4.0.0-beta.0"
"html-webpack-plugin": "^4.0.0-beta.14"
"mini-css-extract-plugin": "^0.9.0" (旧的optimize-css-assets-webpack不支持了)
"preload-webpack-plugin": "^3.0.0-beta.4"
"script-ext-html-webpack-plugin": "^2.1.3"
"vue-loader": "^15.3.0"
"webpack": "^4.26.1"
"webpack-cli": "^3.1.2"
"webpack-dev-server": "^3.2.1"
"script-ext-html-webpack-plugin": "^2.1.3"

3. 遇到的问题

升级webpack后,build报错:ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js

解决:升级vue-loader至15.3.0,

webpack.base.conf.js添加

const {VueLoaderPlugin} = require('vue-loader')
module.exports中添加
 plugins:[new VueLoaderPlugin()]

修改配置文件 webpack.prod.conf.js:

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

解决:

webpack.prod.conf.js webpackConfig配置:
optimization: {
 noEmitOnErrors: true,
 concatenateModules: true,
 splitChunks: {
  chunks: 'all',
  name: 'common',
 },
 runtimeChunk: {
  name: 'runtime'
 }
 }
webpack.prod.conf.js webpackConfig配置: 
optimization:{
 namedModules: true
 },

Plugin could not be registered at ‘html-webpack-plugin-before-html-processing'. Hook was not found.

解决:

npm i preload-webpack-plugin@next -D

Tapable.plugin is deprecated. Use new API on .hooks instead

问题:extract-text-webpack-plugin兼容问题 ,功能:extract css into its own file

解决: 卸载extract-text-webpack-plugin,安装mini-css-extract-plugin

new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css'),
  allChunks: false,
 }),

build出错:ERROR in TypeError: Cannot read property ‘hash' of undefined

解决:

去掉这段
  //打包计时
  const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  const smp = new SpeedMeasurePlugin();

WARNING in configuration
The ‘mode' option has not been set, webpack will fallback to ‘production' for this value. Set ‘mode' option to ‘development' or ‘production' to enable defaults for each environment.
You can also set it to ‘none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

解决:webpackConfig添加 mode: ‘production'

Tapable.plugin is deprecated. Use new API on .hooks instead

解决:

npm i --save-dev extract-text-webpack-plugin@next

会下载到 extract-text-webpack-plugin@4.0.0-beta

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization…

解决:

  • 去掉 webpack.optimize.CommonsChunkPlugin相关配置
  • webpackConfig中与plugins的同级添加
optimization: {
 splitChunks: {
   cacheGroups: {
    commons: {
     name: "commons",
     chunks: "initial",
     minChunks: 2
    }
   }
  }
 },

Unhandled rejection Error: “dependency” is not a valid chunk sort mode

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
 }),

解决:chunksSortMode改为auto或者注释

至此:npm run build 正常
接下来调npm run dev,直接运行成功

4. 总结

开启cache的情况下,原来打包时间22s左右,现在build最快8s左右

升级思路:

  1. 卸载webpack旧版本、安装新版本webpack, webpack-cli
  2. 遇到loader、plugin报错,升级loader、plugin,有的在4.0不支持,需要换成新的
  3. 卸载 ExtractTextPlugin、删除对应配置,改用 mini-css-extract-plugin
  4. 配置环境mode
  5. 其它wenpack3.0优化配置兼容处理

到此这篇关于webpack3.0升级4.0的方法步骤的文章就介绍到这了,更多相关webpack3.0升级4.0内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
JQuery for与each性能比较分析
May 14 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
Javascript模块化机制实现原理详解
Apr 02 #Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 #Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 #jQuery
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 #Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 #Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 #Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JQuery each打印JS对象的方法
2013/11/13 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
员工工作表扬信
2015/05/05 职场文书
歌剧魅影观后感
2015/06/05 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android