记一次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 相关文章推荐
jquery 全局AJAX事件使用代码
Nov 05 Javascript
20个最新的jQuery插件
Jan 13 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
js实现的在本地预览图片功能示例
Nov 09 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 生成短网址原理及代码
2014/01/23 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python中的 enum 模块源码详析
2019/01/09 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
大学生职业生涯规划书模板
2014/01/18 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
店铺转让协议书
2015/01/29 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书