webpack3升級到webpack4的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹了webpack3升級到webpack4的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

興山網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,興山網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為興山1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的興山做網(wǎng)站的公司定做！

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

yarn add webpack-cli global<br>yarn add webpack-cli -D

如果不對webpack-cli進(jìn)行安裝的話會報錯 如下：

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 對一些包的相關(guān)依賴

繼續(xù)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

再一次執(zhí)行yarn run dev 然后又出錯了 心里一萬個奔騰的野馬 沒辦法啊 硬著頭皮看唄

出錯原因

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

webpack4廢除了很多api 之前配置拆分公共代碼 打包第三方庫賊麻煩 然后官方一不做二不休直接廢除了之前的又搗鼓了這個webpack.optimize.SplitChunksPlugin

然后關(guān)于這個插件的使用我也是弄了很久后面跑去官方的example里面去看了一下才有所頭緒，如果你之前大致了解原來的commonchunk plugin直接去看官方的例子你就懂了 這里貼一下官方的example鏈接，其中最重要的就是關(guān)于如何打包多文件入口的common-chunk-add-vendor-chunk例子，不多說放鏈接直接明了的告訴你如何拆分公用代碼以及第三方庫。

至于打包runtime代碼 webpack4直接調(diào)用新的方法 ok 完事

 new webpack.optimize.RuntimeChunkPlugin({
      name: "manifest"
    }),

關(guān)于webpack.optimize.SplitChunksPlugin的詳細(xì)用法 我也貼出來 有興趣的同學(xué)可以自己琢磨

new webpack.optimize.SplitChunksPlugin({
          chunks: "initial", // 必須三選一： "initial" | "all"(默認(rèn)就是all) | "async"
          minSize: 0, // 最小尺寸，默認(rèn)0
          minChunks: 1, // 最小 chunk ，默認(rèn)1
          maxAsyncRequests: 1, // 大異步請求數(shù)， 默認(rèn)1
          maxInitialRequests: 1, // 大初始化請求書，默認(rèn)1
          name: function () {
          }, // 名稱，此選項可接收 function
          cacheGroups: { // 這里開始設(shè)置緩存的 chunks
            priority: 0, // 緩存組優(yōu)先級
            vendor: { // key 為entry中定義的 入口名稱
              chunks: "initial", // 必須三選一： "initial" | "all" | "async"(默認(rèn)就是異步)
              name: "vendor", // 要緩存的 分隔出來的 chunk 名稱
              minSize: 0,
              minChunks: 1,
              enforce: true,
              maxAsyncRequests: 1, // 大異步請求數(shù)， 默認(rèn)1
              maxInitialRequests: 1, // 大初始化請求書，默認(rèn)1
              reuseExistingChunk: true // 可設(shè)置是否重用該chunk（查看源碼沒有發(fā)現(xiàn)默認(rèn)值）
            }
          }
        }),

最后貼上修改后的webpack.optimize.SplitChunksPlugin的代碼

new webpack.optimize.SplitChunksPlugin({
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
        //打包重復(fù)出現(xiàn)的代碼
        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進(jìn)行多線程加速打包的小伙伴們千萬要記住升級happypack 因?yàn)槲铱ㄔ谶@里開了很久后面看了別人的配置才知道happypack也不兼容需要進(jìn)行升級 淚奔。。。。貼一下當(dāng)時的錯誤提示

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 剩下的問題大部分都是因?yàn)楫?dāng)前的包與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也需要進(jìn)行升級 具體我會在最后貼出我的webpack4 demo 大家看著安裝哈

6 最后 配置完成測試一哈　　

開發(fā)環(huán)境下

yarn run start ok 效果沒問題 看一下構(gòu)建時間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

生產(chǎn)環(huán)境下

yarn run build

ok 第三方庫jquery打包到common里了 公共js代碼打包進(jìn)vendor 公共樣式也打包進(jìn)ventor后面分離成vendor.css

目錄結(jié)構(gòu)也沒問題 模塊id也進(jìn)行了固定

下面再來看看速度對比

webpack3

webpack4 是我錯覺嗎= =

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“webpack3升級到webpack4的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：webpack3升級到webpack4的示例分析-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://bm7419.com/article16/dssgdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、App開發(fā)、云服務(wù)器、網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)