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

问题描述 投票：0回答：1

我有一个 typescript 项目，当我运行 

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

获取本地主机：8080/ 404（未找到）

this is my project's tree

这是我的

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"
  }
}

这是我的 

script
文件中的 
html
标签：

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

这个配置有什么问题？

typescript webpack webpack-dev-server
1个回答
0
投票

您无需手动将

<script>
标签插入到html 模板中。 html-webpack-plugin 可以为你做到这一点。

该插件将为您生成一个 HTML5 文件，其中使用脚本标签将所有 webpack 包包含在正文中。

src/app.ts
：

console.log('test')


index.html
：

<!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>


webpack.config.js
：

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' })
  ]
};


package.json
：

{
  "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"
  }
}

运行

npm start
，查看浏览器控制台，得到日志：

test
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.