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倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
百度吧主申请感言
2014/01/12 职场文书
主持词开场白
2014/03/17 职场文书
小学生新年寄语
2014/04/03 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
欢迎新生标语
2014/10/06 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
医院保洁员管理制度
2015/08/05 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers