记一次webpack3升级webpack4的踩坑

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

先贴一波原先webpack3的github配置

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

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

  

yarn add webpack-cli globalyarn 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 [email protected] -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

解决办法:升级呗

  

yarn add [email protected] -D

 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

1 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

  

生产环境下

yarn run build

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

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

下面再来看看速度对比

webpack3

webpack4 是我错觉吗= =

最后贴上webpack4的github链接 有帮助的话帮忙点个star吧= = 我第一次写博客 瑟瑟发抖

原文地址:https://www.cnblogs.com/carrotWu/p/8665720.html

时间: 2024-11-01 14:17:12

记一次webpack3升级webpack4的踩坑的相关文章

vue webpack3 升级webpack4

据说webpack3 比webpack4 编译速度将近快了60%-80%, 成功升级之后,于是来记录下,项目主要是vue ^2.5.9 , webpack ^4.10.2 , webpack-dev-sever ^3.1.4 ,配合升级的还有vue-loader ^15 项目重现编译之后由原来的1.7MB 减少到1.1MB ,看来在压缩这块也是由效果的. 需要修改的地方有以下几点: vue-loader 14 到15 需要增加如下配置 const VueLoaderPlugin = requir

mysql升级的一些踩坑点

升级的方法一般有两类: 1.利用mysqldump来直接导出sql文件,导入到新库中,这种方法是最省事也最保险 缺点:大库的mysqldump费时费力. 2.直接替换掉 mysql 的安装目录和 my.cnf,利用 mysql_upgrade 来完成系统表的升级,这种方法需要备份原有的文件,但属于物理拷贝,速度较快. 缺点:跨版本升级不推荐这么做,比如mysql5.1升级到mysql5.6,mysql5.5升级到mysql5.7等. 本文采用的是第二种方法升级. 本文两种方法都用到 旧版本 my

ELK之ES2.4.1双实例平滑升级至5.2.1踩坑并supervisor管理记

ES老集群用的2.4.1版本,跑的比较好就一直没动,最近看资料ES5.X已经稳定,并且性能有较大提升,心里就发痒了,但由于业务要保持高可以用的属性,就得想一个平滑升级的方案,最后想到了多实例过度的办法,5.X版本网上介绍配置变化较大,也做好了踩坑准备,确定好要升级后,立刻动手. 一.对应升级改造方案 使用端口9220和9330 安装并配置好新的ES5.2.1实例-->关掉logstash并将ES2.4.1实例堆栈调小重启(kafka保留3个小时日志所以不会丢失)-->启动ES5.2.1并将lo

踩坑记:httpComponents 的 EntityUtils

今天写的一个服务程序,有人报告获得的数据中文乱码,而我是用 apache 通过 httpComponents 去取得数据的,于是开启日志的 debug 级别. 在日志里果然发现中文不见了,有乱码出现: 2014-07-02 16:35:01.348 DEBUG [Wire.java:86] http-outgoing-8 << "<?xml version="1.0" encoding="UTF-8"?>... subject=&q

jQuery升级踩坑大全

背景 jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本.其实如果早期版本使用不当,可能会有DOMXSS漏洞,非常建议升级到jQuery 1.9.x或以上版本.前段时间我就主导了这件事情,把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3.jQuery官方也为类似升级工作提供了jQuery Migrate插件. 言归正传. 坑从何处来 jQuery 1.11.3是1.x时代的最后一个版本(作者更新:2016年1月

Flexbox微信踩坑填坑记

Flexbox的大名很早就有了解过,只是之前一直是开发PC端的页面,对这个东西还不是很敢造次去用.近期的项目是移动端开发,正好,内心一激动,就大大咧咧地开始用flexbox布局了.中间踩过的一些坑,以及将来可能还会踩到的坑,都在这里记录一下. 关于flexbox,有一篇文章讲的还是很透彻的,图文并茂,有兴趣的戳链接了解下.一篇很屌很好的文章 在用flexbox之前,很多人最关心的应该还是兼容性的问题.个人一直觉得,前端程序员的使命,就是要推进终端用户去使用最先进的浏览器.当然,现实是骨感的,我们

Spark踩坑记——数据库(Hbase+Mysql)转

转自:http://www.cnblogs.com/xlturing/p/spark.html 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streaming进行实时的数据流处理时,我需要将计算好的数据更新到hbase和mysql中,所以本文对spark操作hbase和mysql的内容进行总结,并且对自己踩到的一些坑进行记录. Spark Streaming持久化设计

Spring @Transactional踩坑记

@Transactional踩坑记 总述 ? Spring在1.2引入@Transactional注解, 该注解的引入使得我们可以简单地通过在方法或者类上添加@Transactional注解,实现事务控制. 然而看起来越是简单的东西,背后的实现可能存在很多默认规则和限制.而对于使用者如果只知道使用该注解,而不去考虑背后的限制,就可能事与愿违,到时候线上出了问题可能根本都找不出啥原因. 踩坑记 1. 多数据源 事务不生效 背景介绍 ? 由于数据量比较大,项目的初始设计是分库分表的.于是在配置文件中

[转]Spark 踩坑记:数据库(Hbase+Mysql)

https://cloud.tencent.com/developer/article/1004820 Spark 踩坑记:数据库(Hbase+Mysql) 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值. 最近一个实时消费者处理任务,在使用spark streaming进行实时的数据流处理时,我需要将计算好的数据更新到hbase和mysql中,所以本文对spark操作hbase和mysql的内容进行总结,并且对自己