Webpack 遷移到V4版本指南

Webpack 遷移到V4版本指南

須要升級的npm庫列表

• "webpack": "^4.6.0",
• "webpack-cli": "^2.0.15",
• "webpack-dev-middleware": "^3.1.2",
• "webpack-hot-middleware": "^2.22.1",
• "file-loader": "^1.1.11",
• "url-loader": "^1.0.1",
• "html-webpack-plugin": "^3.2.0",
• "less": "^3.0.4",
• "less-loader": "^4.1.0",

webpack.config.js 調整

module 配置調整

module.loaders 變成 module.rules

module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css',
      },
    ]
}

// change
// 注意新版本的loader不能省略，即：style-loader 不能寫成 style
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {loader: "style-loader"]},
          {loader: "css-loader"]},
        ]
      },
    ]
}

plugins 配置調整

• remove extract-text-webpack-plugin
• remove NoErrorsPlugin
• remove UglifyJsPlugin
• remove DedupePlugin
• remove NamedModulesPlugin
• remove HashedModulesPlugin
• rename webpack.optimize.OccurenceOrderPlugin to webpack.optimize.OccurrenceOrderPlugin

• remove CommonsChunkPlugin 改用 optimization.runtimeChuck 和 optimization.splitChunks

  onfig.optimization = {
    minimize: true,
    // runtimeChunk: 'single', // 測試發現這個設置成true或者single首頁空白，無任何報錯，所以暫時不作設置。
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  };

添加 mode

• 開發環境添加

  module.exports = {
    mode: 'development'
  }

• 生產環境

  module.exports = {
    mode: 'production'
  }

Code Spliting

Q&A

• Error: Cannot find module 'webpack/lib/ConcatSource'

  解決辦法，移除：extract-text-webpack-plugin插件。（這裏須要考慮如何抽離CSS）

• OccurenceOrderPlugin has been renamed to OccurrenceOrderPlugin

  解決辦法，修改 OccurenceOrderPlugin 成 OccurrenceOrderPlugin

• ERROR in ./assets/images/icons/search.svg

  詳細報錯信息以下：

  ERROR in ./assets/images/icons/search.svg
  Module build failed: TypeError: Cannot read property 'context' of undefined
      at Object.loader (/Users/drew/Sites/my-site/node_modules/file-loader/dist/index.js:34:49)
  @ ./styles.sass 6:40863-40906

  解決辦法：升級 url-loader 和 file-loader

• Cannot read property 'lessLoader' of undefined

  詳細報錯信息以下：

  ERROR in ./src/views/antdemo.less
  Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'lessLoader' of undefined
      at Object.module.exports (/Users/gxz/workspace_js/react-demo/node_modules/less-loader/index.js:50:18)
      at runLoaders (/Users/gxz/workspace_js/react-demo/node_modules/webpack/lib/NormalModule.js:244:20)
      at /Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:364:11
      at /Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:230:18
      at runSyncOrAsync (/Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
      at iterateNormalLoaders (/Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
      at Array.<anonymous> (/Users/gxz/workspace_js/react-demo/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
      at Storage.finished (/Users/gxz/workspace_js/react-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
      at provider (/Users/gxz/workspace_js/react-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
      at /Users/gxz/workspace_js/react-demo/node_modules/graceful-fs/graceful-fs.js:78:16
      at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:532:3)
  @ ./src/views/antddemo.js 44:0-25
  @ ./src/routes/antd.js
  @ ./src/routes/index.js

  解決辦法：升級 less 和 less-loader