记一次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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
js 加载时自动调整图片大小
May 28 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 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/08/20 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PDO::query讲解
2019/01/29 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python3.5安装python3-tk详解
2019/04/26 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
python 瀑布线指标编写实例
2020/06/03 Python
python实现发送邮件
2021/03/02 Python
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
教学质量月活动总结
2015/05/11 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
hive数据仓库新增字段方法
2022/06/25 数据库