记一次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 相关文章推荐
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
详解javascript函数的参数
Nov 10 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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/20 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python几种常用功能实现代码实例
2019/12/25 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
总经理职责
2013/12/22 职场文书
售后服务承诺书模板
2014/05/21 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
入团介绍人意见范文
2015/06/04 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python