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 相关文章推荐
jquery 操作DOM的基本用法分享
Apr 05 Javascript
jQuery基础知识小结
Dec 22 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
解决php-fpm.service not found问题的办法
2017/06/06 PHP
php实现小程序支付完整版
2018/10/09 PHP
phpinfo的知识点总结
2019/10/10 PHP
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
2017/09/08 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
python中元组的用法整理
2020/06/15 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
python的dict判断key是否存在的方法
2020/12/09 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
C#笔试题
2015/07/14 面试题
行政经理的岗位职责
2013/11/23 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
网络管理员岗位职责
2014/03/17 职场文书
日语专业求职信
2014/07/04 职场文书
学习保证书100字
2015/02/26 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB