記一次webpack3升級webpack4的踩坑

時間 2019-11-17

標籤一次 webpack3 webpack 升級 webpack4 简体版

原文原文鏈接

webpack4版本也出了好久了以前弄過一段時間的升級後面由於種種緣由擱淺了今天有硬着頭皮升級了一波 yeah 還好升級成功了 javascript

先貼一波原先webpack3的github配置 css

ps（我只是一個菜雞= = webpack的配置很辣雞）廢話少說開擼html

1 webpack升級到4.0版本而且安裝webpack-cli

yarn add webpack-cli global
yarn add webpack-cli -D

　　若是不對webpack-cli進行安裝的話會報錯以下：java

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!!! 報錯了node

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 升級一波jquery

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

不過看了挺多資料只要webpack-dev-server是3.0版本以上好像就兼容大霧反正我是3.0.0-alpha6經過了webpack

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

再一次執行yarn run dev 而後又出錯了內心一萬個奔騰的野馬沒辦法啊硬着頭皮看唄git

出錯緣由 github

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

　　webpack4廢除了不少api 以前配置拆分公共代碼打包第三方庫賊麻煩而後官方一不作二不休直接廢除了以前的又搗鼓了這個webpack.optimize.SplitChunksPluginweb

　　而後關於這個插件的使用我也是弄了好久後面跑去官方的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 happypack@next -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