Webpack-dev-server “無法獲取 /”

Question

我正在嘗試讓我的 webpack-dev-server 運行，但我總是在瀏覽器中遇到錯誤“無法獲取 /”。 我知道有幾個問題有同樣的錯誤，但沒有一個對我有幫助，所以現在我會試試運氣:)

這些是我的 webpack-config.js 配置：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
};

package.json：

{
  "name": "ts",
  "version": "1.0.0",
  "description": "test",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "lite-server": "^2.6.1",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

從 index.html 中查找 bundle.js 的腳本如下所示：

<script type="module" src="dist/bundle.js"></script>

旁注：index.html 不在像 bundle.js 這樣的 dist 文件夾中，但我還是得到了同樣的錯誤。

更新| 解決了

如果有人會遇到同樣的問題：

“webpack-dev-server”自 5.0（或更高版本）起不再受支持。 您必須將其更改為

"開始": "webpack 服務",

此外，這里我的 webpack-config.js 文件發生了變化，這起到了作用：

    const path = require('path');
     
    module.exports = {
        mode: 'development',
        entry: './src/app.ts',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/dist/',
        },
        devServer: {
            static: {
                directory: path.join(__dirname, '/')
            }
        },
       .
       .
       .
};

Answer 1

嘗試將output.publicPath設置為auto

https://webpack.js.org/guides/public-path/#automatic-publicpath

並通過 webpack 運行開發服務器：

https://github.com/evenstensberg/webpack-react-boilerplate/blob/master/package.json#L9

您還需要一個 html 文件：

https://webpack.js.org/plugins/html-webpack-plugin/