Webpack 开发服务器使用 Typescript 返回 404 错误

发布于04月23日

我有一个打字项目，当我运行npm start时，浏览器不会打开，vscode控制台没有显示错误并成功编译，一切似乎都很好，当我在控制台手动转到http://localhost:8080/时，我遇到了404错误:

获取本地主机:8080/404(未找到)

这是我的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个文件: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标签:

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

此配置有什么问题？

✗ tree -L 2 -I node_modules . ├── index.html ├── package-lock.json ├── package.json ├── src │ └── app.ts ├── tsconfig.json └── webpack.config.js 1 directory, 6 files

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); 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/, }, ], }, devServer: { static: './dist', }, resolve: { extensions: ['.ts', '.js'], }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html' }) ] };

{ "version": "1.0.0", "scripts": { "start": "webpack serve --open", "build": "webpack" }, "devDependencies": { "html-webpack-plugin": "^5.5.1", "ts-loader": "^9.4.2", "typescript": "^5.0.4", "webpack": "^5.80.0", "webpack-cli": "^5.0.2", "webpack-dev-server": "^4.13.3" } }

Webpack 开发服务器使用 Typescript 返回 404 错误

推荐答案

Typescript相关问答推荐

为什么当我试图从数据库预填充时，属性x不存在于类型{错误：字符串; }.ts(2339)上？

强制两个类型脚本对象具有相同的键

如何使用TypScript和react-hook-form在Next.js 14中创建通用表单组件？

当使用`type B = A`时，B的类型显示为A.为什么当`type B = A时显示为`any `｜用A代替？

HttpClient中的文本响应类型选项使用什么编码？''

为什么从数组中删除一个值会删除打字错误？

接口的额外属性作为同一接口的方法的参数类型'

迁移到Reaction路由V6时，获取模块Reaction-Router-Dom'；没有导出的成员RouteComponentProps错误

泛型类型联合将参数转换为Never

具有泛型类型和缺省值的键

为什么在回调函数的参数中不使用类型保护？

我可以使用TypeScrip从字符串词典/记录中填充强类型的环境对象吗？

TS如何不立即将表达式转换为完全不可变？

笛卡尔产品类型

为什么我在这个重载函数中需要`as any`？

类型'；字符串｜数字'；不可分配给类型'；未定义'；.类型'；字符串'；不可分配给类型'；未定义'；

类型脚本中参数为`T`和`t｜unfined`的重载函数

窄SomeType与SomeType[]

有没有一种方法可以防止我的组件包在其中安装样式组件'； node 模块中的s目录

Typescript泛型验证指定了keyof的所有键