Webpack：无法使用快速服务器中间件获取 index.html

Question

我按照webpack的官方入门说明设置了一个小测试项目和配置文件。按照他们的建议，我使用带有 webpack 中间件的快速服务器。

设置

server.js:

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
    webpackDevMiddleware(compiler, {
        publicPath: config.output.publicPath,
    })
);

// Serve the files on port 3000.
app.listen(3000, function () {
    console.log('Example app listening on port 3000!\n');
});

我的目录文件夹如下所示：

- dist/
    - assets/
    - css/
    - bundle.index.html
    - bundle.about.html
    - index.html
    - about.html
- src/
    - fonts/
    - images/
    - sass/
    - templates/
        - about.html
        - index.html
    - ts/
        - abstracts/
        - utils/
        - pages/
            - about.ts
            - index.ts

这是我的 webpack.config（为此删除了不必要的项目）。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    mode: mode,
    entry: {
        index: './src/ts/pages/index.ts',
        about: './src/ts/pages/about.ts',
    },
    output: {
        filename: 'bundle.[name].js',
        path: path.resolve(__dirname, './dist'),
        clean: true,
        publicPath: '.',
        assetModuleFilename: 'assets/[name][ext][query]',
    },
    devServer: {
        port: 3000,
        sockPort: 3000,
        contentBase: path.resolve(__dirname, 'dist'),
    },
    plugins: [ 
        new HtmlWebpackPlugin({
            title: 'Index',
            filename: 'index.html',
            template: 'dist/index.html',
            chunks: ['index'],
        }),
        new HtmlWebpackPlugin({
            title: 'about',
            filename: 'about.html',
            template: 'dist/about.html',
            chunks: ['about'],
        }),
    ],
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            // Support von versch. Grafiktypen
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: './assets/images/[name][ext][query]'
                }
            },
            // Support von Fonts
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: './assets/fonts/[name][ext][query]'
                }
            },
        ],
    },
    resolve: {
        extensions: ['.ts'],
        alias: {
            Style: path.resolve(__dirname, './src/sass'),
            Fonts: path.resolve(__dirname, './src/fonts'),
            Images: path.resolve(__dirname, './src/images'),
        }
    }
};

问题

运行 localhost:3000 在我的浏览器中，表达 returns Cannot get /.

运行 localhost:3000 在我的浏览器中，表达 returns Cannot get / index.html.

运行 localhost:3000/dist/index.html 在我的浏览器中，表达 returns Cannot get dist/index.html.

简单地说，我无法访问任何内容。为什么？我的配置说 dist 目录应作为根目录。

  devServer: {
        port: 3000,
        sockPort: 3000,
        contentBase: path.resolve(__dirname, 'dist'),
    },

Answer 1

publicPath 选项的以下值应该有效：

• publicPath: 'auto'
• publicPath: '/'
• publicPath: ''

完整示例：

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/ts/pages/index.ts",
    about: "./src/ts/pages/about.ts",
  },
  output: {
    filename: "bundle.[name].js",
    path: path.resolve(__dirname, "./dist"),
    clean: true,
    publicPath: "",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Index",
      filename: "index.html",
      template: "src/templates/index.html",
      chunks: ["index"],
    }),
    new HtmlWebpackPlugin({
      title: "about",
      filename: "about.html",
      template: "src/templates/about.html",
      chunks: ["about"],
    }),
  ]
};

src/templates/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>
  index
</body>

</html>

src/ts/pages/index.ts:

console.log("index");

server.js:

const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");

const app = express();
const config = require("./webpack.config.js");
const compiler = webpack(config);

app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

app.listen(3000, function () {
  console.log("Example app listening on port 3000!\n");
});

结果：

包版本：

  "devDependencies": {
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  },
  "dependencies": {
    "express": "^4.17.1",
    "webpack-dev-middleware": "^5.0.0"
  }