记一次webpack3升级webpack4的踩坑经历


Posted in Javascript onJune 12, 2018

webpack4版本也出了很久了 之前弄过一段时间的升级 后面因为种种原因搁浅了 今天有硬着头皮升级了一波 yeah 还好升级成功了

先贴一波原先webpack3的github配置

ps(我只是一个菜鸡= = webpack的配置很辣鸡 )废话少说 开撸

1 webpack升级到4.0版本并且安装webpack-cli

yarn add webpack-cli global<br>yarn add webpack-cli -D

如果不对webpack-cli进行安装的话会报错 如下:

The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D

2 对一些包的相关依赖

继续yarn run dev yeah!!! 报错了

Error: Cannot find module 'webpack/bin/config-yargs'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\hboxs022\Desktop\webpack-demo\webpack-demo\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
error Command failed with exit code 1.

解决办法:这个就是目前版本的webpack-dev-server不支持webpack4 升级一波

yarn add webpack-dev-server@3.1.1 -D //我装的是3.1.1的包

不过看了挺多资料 只要webpack-dev-server是3.0版本以上好像就兼容 大雾 反正我是3.0.0-alpha6通过了

3 去除commonchunk plugin 改用webpack.optimize.SplitChunksPlugin

再一次执行yarn run dev 然后又出错了 心里一万个奔腾的野马 没办法啊 硬着头皮看呗

出错原因

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

webpack4废除了很多api 之前配置拆分公共代码 打包第三方库贼麻烦 然后官方一不做二不休直接废除了之前的又捣鼓了这个webpack.optimize.SplitChunksPlugin

然后关于这个插件的使用我也是弄了很久后面跑去官方的example里面去看了一下才有所头绪,如果你之前大致了解原来的commonchunk plugin直接去看官方的例子你就懂了 这里贴一下官方的example链接,其中最重要的就是关于如何打包多文件入口的common-chunk-add-vendor-chunk例子,不多说放链接直接明了的告诉你如何拆分公用代码以及第三方库。

至于打包runtime代码 webpack4直接调用新的方法 ok 完事

new webpack.optimize.RuntimeChunkPlugin({
      name: "manifest"
    }),

关于webpack.optimize.SplitChunksPlugin的详细用法 我也贴出来 有兴趣的同学可以自己琢磨

new webpack.optimize.SplitChunksPlugin({
          chunks: "initial", // 必须三选一: "initial" | "all"(默认就是all) | "async"
          minSize: 0, // 最小尺寸,默认0
          minChunks: 1, // 最小 chunk ,默认1
          maxAsyncRequests: 1, // 最大异步请求数, 默认1
          maxInitialRequests: 1, // 最大初始化请求书,默认1
          name: function () {
          }, // 名称,此选项可接收 function
          cacheGroups: { // 这里开始设置缓存的 chunks
            priority: 0, // 缓存组优先级
            vendor: { // key 为entry中定义的 入口名称
              chunks: "initial", // 必须三选一: "initial" | "all" | "async"(默认就是异步)
              name: "vendor", // 要缓存的 分隔出来的 chunk 名称
              minSize: 0,
              minChunks: 1,
              enforce: true,
              maxAsyncRequests: 1, // 最大异步请求数, 默认1
              maxInitialRequests: 1, // 最大初始化请求书,默认1
              reuseExistingChunk: true // 可设置是否重用该chunk(查看源码没有发现默认值)
            }
          }
        }),

最后贴上修改后的webpack.optimize.SplitChunksPlugin的代码

new webpack.optimize.SplitChunksPlugin({
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
        //打包重复出现的代码
        vendor: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'vendor'
        },
        //打包第三方类库
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: Infinity
        }
      }
    }),

    new webpack.optimize.RuntimeChunkPlugin({
      name: "manifest"
    }),

4 升级happypack插件!!!!!

至于为啥用红字 如果使用了happypack进行多线程加速打包的小伙伴们千万要记住升级happypack 因为我卡在这里开了很久后面看了别人的配置才知道happypack也不兼容需要进行升级 泪奔。。。。贴一下当时的错误提示

TypeError: Cannot read property 'length' of undefined
at resolveLoader (C:\Users\hboxs022\Desktop\webpack-demo\webpack-demo\node_modules\happypack\lib\WebpackUtils.js:138:17)
at C:\Users\hboxs022\Desktop\webpack-demo\webpack-demo\node_modules\happypack\lib\WebpackUtils.js:126:7
at C:\Users\hboxs022\Desktop\webpack-demo\webpack-demo\node_modules\happypack\node_modules\async\lib\async.js:713:13

解决办法:升级呗

5 剩下的问题大部分都是因为当前的包与webpack4不兼容 这里就直接贴出来了

var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
at C:\Users\hboxs022\Desktop\webpack-demo\webpack-demo\node_modules\html-webpack-plugin\lib\compiler.js:81:51
at compile (C:\Users\hboxs022\Desktop\webpack-demo\webpack-demo\node_modules\webpack\lib\Compiler.js:240:11)
at hooks.afterCompile.callAsync.err (C:\Users\hboxs022\Desktop\webpack-demo\webpack-demo\node_modules\webpack\lib\Compiler.js:488:14)解决办法:升级html-webpack-plugin

yarn add webpack-contrib/html-webpack-plugin -D

最后 extract-text-webpack-plugin和sass-loader也需要进行升级 具体我会在最后贴出我的webpack4 demo 大家看着安装哈

6 最后 配置完成测试一哈

开发环境下

yarn run start ok 效果没问题 看一下构建时间9891ms 对比图中的webpack3 17161ms

:\Users\hboxs022\Desktop\webpack4>yarn run dev
yarn run v1.3.2
$ set NODE_ENV=dev && webpack-dev-server
Happy[js]: Version: 5.0.0-beta.3. Threads: 6 (shared pool)
(node:2060) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
i 「wds」: Project is running at http://localhost:8072/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from C:\Users\hboxs022\Desktop\webpack4\src
Happy[js]: All set; signaling webpack to proceed.
Happy[css]: Version: 5.0.0-beta.3. Threads: 6 (shared pool)
Happy[css]: All set; signaling webpack to proceed.
(node:2060) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
i 「wdm」: wait until bundle finished: /page/index.html
i 「wdm」: Hash: 1911cfc871cd5dc27aca
Version: webpack 4.1.1
Time: 9891ms
Built at: 2018-3-28 18:49:25

记一次webpack3升级webpack4的踩坑经历

生产环境下

yarn run build

记一次webpack3升级webpack4的踩坑经历

ok 第三方库jquery打包到common里了 公共js代码打包进vendor 公共样式也打包进ventor后面分离成vendor.css

记一次webpack3升级webpack4的踩坑经历

目录结构也没问题 模块id也进行了固定

下面再来看看速度对比

webpack3

记一次webpack3升级webpack4的踩坑经历

webpack4 是我错觉吗= =

记一次webpack3升级webpack4的踩坑经历

最后贴上webpack4的github链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 #Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 #Javascript
webpack分离css单独打包的方法
Jun 12 #Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 #Javascript
webpack 样式加载的实现原理
Jun 12 #Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 #Javascript
webpack项目轻松混用css module的方法
Jun 12 #Javascript
You might like
怎样才能成为PHP高手?学会“懒惰”的编程
2006/12/05 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python标记语句块使用方法总结
2019/08/05 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
广播体操口号
2014/06/18 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle