設定 Webpack 4 配置

安裝

• webpack
• webpack-dev-server
• webpack-cli (新的)

這次任何指令都會需要 webpack-cli 的幫助，請務必安裝。

重大更新

• 指令交由 webpack-cli 負責
• 朝向「Zero config 」的目標前進
• 許多設定有了預設值 (簡易設定只需要 module, resolve, plugins 即可)
• 指令上多了 mode 可以設定 (development, production)
• 自動處理許多 development 與 production 優化
• 不用想破頭要用哪個 devtool 了
• production mode打包速度更快、size 更小
• 不需處理 hotModuleReplacement 設定 (包含 dev-server)
• entry 預設為 ./src
• output 預設為 ./dist

指令

"scripts": {
  "dev": "webpack-dev-server --mode development --open --hot",
  "build": "webpack --mode production"
}

這次對於 hotModuleReplacement 有不錯的優化，所以我連 devServer.js 設定都省了，直接靠指令即可。

使用設定

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    alias: {
      components: path.resolve(__dirname, 'src/components/'),
      api: path.resolve(__dirname, 'src/api'),
      utility: path.resolve(__dirname, 'src/utility')    
    }
  },
  plugins: [
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html'),
      filename: "./index.html"
    })
  ]
}

遇到的雷

• 以往 webpack config 如果要寫 ES6 語法，會把檔案命名為 webpack.babel.config.js ，經過我自己實驗，雖然 ES6 語法沒問題，但在 index.js 會遇到看不懂 JSX 語法問題，目前還不知道如何解決，建議 webpack config 還是先以 webpack.config.js 命名並寫 ES5 語法比較適當。
• htmlWebpackPlugin 在 import / require 的時候務必以「小寫」開頭，否則會找不到 module。

更新

• 2018/07/17 htmlWebpackPlugin 小寫開頭問題已經解決了，就算是大寫開頭也找得到囉！

以上

記錄一下，也分享給有需要的朋友！