Webpack Dev Server搭配TypeScript返回404错误求助

运行npm start后浏览器不会自动打开，VSCode控制台无报错且编译成功，但手动访问http://localhost:8080/时出现404错误：

GET localhost:8080/ 404 (Not Found)

项目结构：

相关配置文件 #

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',
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

tsconfig.json #

{
  "compilerOptions": {
    "target": "es6",
    "module": "es2015",
    "lib": [
      "dom",
      "es6",
      "dom.iterable",
      "scripthost"
    ],
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "esModuleInterop": true,
    "experimentalDecorators": true
  }
}

package.json #

{
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "lite-server": "^2.5.4",
    "ts-loader": "^9.4.2",
    "typescript": "^5.0.4",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2",
    "webpack-dev-server": "^4.13.3"
  }
}

HTML中的脚本标签 #

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

你的配置存在两个核心问题，以下是具体修复方案：

1. 浏览器不自动打开：添加devServer.open配置 #

webpack-dev-server默认不会自动启动浏览器，需在webpack.config.js中新增devServer配置项开启自动打开：

module.exports = {
  // ... 保留原有配置
  devServer: {
    open: true, // 启动服务后自动打开浏览器
  }
};

2. 访问localhost:8080出现404：配置静态文件目录与资源路径 #

404是因为webpack-dev-server找不到HTML文件，同时资源路径解析存在问题，按以下步骤修复：

步骤1：指定静态文件根目录 #

在webpack.config.js的devServer中添加static选项，指向项目根目录（你的HTML文件应该存放在这里）：

devServer: {
  open: true,
  static: {
    directory: path.resolve(__dirname, './'), // 告诉devServer从哪里加载静态文件
  },
}

步骤2：修正output.publicPath格式 #

将output.publicPath改为'/dist/'（添加前后斜杠），确保资源路径解析为绝对路径，避免加载错误：

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/dist/', // 修正为带斜杠的绝对路径格式
},

步骤3：调整HTML脚本标签 #

去掉type="module"，因为webpack打包后的bundle.js并非ES模块格式（tsconfig的module配置仅影响TypeScript编译，webpack会统一处理输出格式）：

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

最终修改后的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/',
  },
  devtool: 'inline-source-map',
  devServer: {
    open: true,
    static: {
      directory: path.resolve(__dirname, './'),
    },
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

完成以上修改后，重新运行npm start，浏览器会自动打开，且能正常访问页面。

内容的提问来源于stack exchange，提问作者Sunny