webpack 開發時的一些設定

筆記筆記！

開啟 dev-server

每次都要 npm run build 才能看到結果的話太麻煩了，所以能用 webpack 提供的 dev sever，實現自動重新編譯的功能。

首先參考 官方說明：

1. 安裝

npm install --save-dev webpack-dev-server

2. 設定 config

module.exports = {
  devServer: {
    // 打包後的檔案位置
    static: './dist'
  }
}

3. 打開 dev server

npx webpack serve --open

就是這麼簡單囉！

開啟 source map

source map 的用途是讓你比較好 debug。

拿一段 code 來舉例：

// 樣式
const css = require('./style.scss')
// 隨便寫的模組
import { add } from './utils'

const a = [1, 2, 3]
const b = [...a]

for (let c of b) {
  // 跑到第二圈時丟一個 error
  if (c === 2) {
    throw new Error('hahaha')
  }
  console.log(c)
}

這時候如果要看 code 就會發現摻了一堆 webpack 的東西：

這是因為在跑的時候是執行 bundle 後的檔案，所以這裡的程式碼也當然是打包後的。

所以，為了讓 debug 時能夠看 src（也就是打包前）的程式碼，可以到 config 裡面加上這行：

module.exports = {
  devtool: 'inline-source-map'
}

有了 source map 以後就會自動把 bundle 跟 src 給對應起來，所以就能看到正常的 code 了：