為什麼找不到 webpack-dev-server 所產出的打包檔案？

問題

用 webpack-dev-server 跑打包檔案於 localhost:9000，但在瀏覽器上輸入 網址卻找不到檔案？

// webpack.config.dev.js setting
const webpackConfig = {
  context: path.join(__dirname, "./src"),
  entry: "./index.js",
  output: {
    path: path.join(__dirname, "output/assets"),
    filename: "app.js"
  }
};
module.exports = webpackConfig;
// package.json script setting
"scripts": {
  "dev": "webpack-dev-server --port 9000 --config ./webpack.config.dev.js",
},

解答

其實這邊的設定都沒有問題，webpack-dev-server 也跑得起來沒問題，但最重要的是

webpack.config 的 output 需要加上 publicPath 這個設定！沒有的話會找不到記憶體中輸出的路徑！

在 webpack-dev-server 官網上寫到：

This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same URL path, the bundle in memory takes precedence (by default).

其他需注意的地方

1. publicPath 這個設定也跟 HotModuleReplacement 這個功能有很大的關係，設定錯誤有可能會導致無法正常 reload 畫面！
2. 另外設定時也需注意 publicPath 需要跟 content-base 是相對路徑！

以上

記錄一下，也希望可以解決你的問題！