webpack3向4升級中具體問題及解決辦法

聽說webpack4同比webpack舊版本構建速度提示至少一倍，因而開始webpack升級的嘗試。

webpack4已經出來很長時間了，手頭有一個基於webpack3的微信公衆號項目，在項目的空檔期本身在一個開發分支上作了webpack3向4的遷移。

　　首先將webpack升級到了4.28.2版本，由於線上項目基於webpack3的版本且爲全局安裝，不要求升級並且很穩定，項目也不是很重，因此在這個分支驚進行了局部安裝（tip：看到有的童鞋說webpack的版本衝突的問題，就是升級了webpack以後，爲何在終端查看webpack版本的時候仍是全局的，即爲升級的版本。這個問題的解決方法是全局安裝高版本的webpack，可是如何遇到像我這樣的狀況，不須要全局安裝，那你就局部安裝，雖然輸出的是低版本，可是運行的是node_modules裏面的webpack版本,效果如圖：

 

）。安裝的方法能夠升級也能夠安裝具體的版本。

　　webpack4將webpack-cli進行了分離，因此須要單獨安裝。命令行代碼：npm i -D webpack-cli

　　最基礎的兩個依賴安裝完畢，若是你對webpack4更新以後的一些配置的更新很熟悉的話，能夠直接進行配置。不然，你能夠跑一下本身的項目，終端會報相應的錯誤，你能夠針對性的進行版本遷移。npm run dev的項目能夠直接在本地跑起來，當你想看本地build的項目的時候，須要將項目扔到服務器上，這就是爲何你運行了npm run build以後會出現這樣的提示

我將個人項目利用nginx代理放到了服務器上，順利的跑了起來。這樣咱們在進行升級到時候就能夠同時升級開發和生產環境。

1、如下是我在升級到時候終端報錯，及對應的解決辦法：

Tapable.plugin is deprecated. Use new API on `.hooks` instead 

　　問題緣由

　　extract-text-webpack-plugin目前版本不支持webpack4。

　　解決方案

　　使用extract-text-webpack-plugin的最新的beta版

　　npm install extract-text-webpack-plugin@next 

　　不在維護extract-text-webpack-plugin ，使用mini-css-extract-plugin來提取css 

Module build failed: TypeError: Cannot read property 'vue' of undefined

　　解決方案

　　Sorry, I forgot update vue-loader@latest

　　npm install vue-loader@14.2.2

箭頭函數報錯：

　　在.bablerc文件中presets的參數配置

　　{

　　  "presets": [

　　    "es2015",

　　    "stage-1"

 　　 ],

 　　 "env": {

  　　  "modules": false,　　

  　　  "targets": {

  　　    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

  　　  },

  　　  "start": {

  　　    "presets": [

  　　      "react-hmre"

  　　    ]

  　　  }

 　　 },

  　　"plugins": ["transform-vue-jsx", "transform-runtime",

   　　["component", [

   　　   {

        　　"libraryName": "mint-ui",

        　　"style": true

      　　}

    　　]]]

　　}

Vue使用webpack：No parser and no file path given, couldn't infer a parser.

　　問題出在prettier。

　　解決方案

　　vue-loader@13.7.2 和vue-loader@14.2.3是已經修復了，等待發布新版能夠解決

　　npm install prettier@1.12.1 --save-dev

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

　　解決方案

　　npm install --save-dev html-webpack-plugin@next

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

　　解決方案

　　在webpack.config.js裏面

　　const VueLoaderPlugin = require('vue-loader/lib/plugin');

　　plugin配置裏面：new VueLoaderPlugin()

 

Module parse failed: Unexpected character '@' (286:2)

You may need an appropriate loader to handle this file type.

　　解決方案  *並且loader的順序要保持爲下方的順序，loader的順序爲從右到左

　　{

  　　test: /\.css$/,

  　　use: ['style-loader','css-loader'],

　　} 

Unhandled rejection Error: "dependency" is not a valid chunk sort mode at HtmlWebpackPlugin.sortEntryChunks 

　  解決方案

  　chunksSortMode: 'none‘

 building for production...CssSyntaxError {

  name: 'CssSyntaxError',

  reason: 'Unknown word',

}

　　 解決方案

 　　vue-loader 必須有vueLoaderConfig

　　配置選項

　　use: [{

  　　loader: 'vue-loader',

  　　options: vueLoaderConfig

　　}],

2、如下是版本升級以後須要注意的地方：

 1.vue將style重複打包，將

{

  test: /\.scss$/,

  use: ["style-loader", "css-loader", "sass-loader"]

}

, {

  test: /\.css$/,

  use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],

}

, {

  test: /\.styl$/,

  use: [

    {

      loader: 'style-loader!css-loader',

      options: {

        minimize: true

      }

    },

    'postcss-loader', 'stylus-loader'

  ]

}

, {

  test: /\.ts$/, use: 'ts-loader'

}

這部分rules從webpack.base.conf.js放到webpack.prod.conf.js裏面

2.移除CommonsChunkPlugin，用optimization.splitChunks和optimization.runtimeChunk來代替

3添加mode參數

4移除loaders使用rules

5處理css的loader裏面要use  MiniCssExtractPlugin.loader而且MiniCssExtractPlugin.loader的順序必須在css-loader以前在style-loader以後

 3、如下是作的一些優化以後遇到的問題及解決辦法

******file-loader和url-loader的區別是file-loader生成相應的文件並在目錄中顯示，url-loader生成base64編碼不在項目中顯示——性能比較：file-loader生成的項目爲534k，url-loader生成的項目爲550k（臨時數據）

 

*******static中的靜態資源不參與到打包當中，適用於常常變動的資源，webpakc將static中的資源直接copy到打包項目中

 

*******要看本地build以後的項目，要將本地的項目扔到服務器上，能夠配置一個nginx代理，代理到本地的build以後的代碼路徑，而後將本地的build的assetsPublicPath的值換作」./」防止找不到路徑，以後就能夠訪問本地的打包以後的效果了

 

*******路由懶加載以後報錯:emitting HtmlWebpackPlugin/Users/payplus/Desktop/workspace/webpack3-4-test/jcbs-web/src/main/webapp/jcbs-w/node_modules/toposort/index.js:35

      throw new Error('Cyclic dependency' + nodeRep)

更新html-webpack-plugin的版本npm i --save-dev html-webpack-plugin@next解決了問題

 

對於webpack4的「零配置」我的仍是喜歡建立一個webpack.conf.js來進行一些配置的，webpack也是這麼作的，容許開發者自主配置，零配置是爲了方便開發者可是隻提供相應的api而不懂其中的原理和流程是不利於開發者成長的，純粹看官方文檔和一些博客上面的遷移操做也許達不到本身的需求，畢竟當你不進行升級操做的時候，全部的案例都讀得懂，可是當你升級了webpack以後終端一片夕陽紅的時候，可能會以爲無從下手，但願本文能給你提供一些常見報錯的解決思路或方法，若有其它的相關問題歡迎討論。