Webpack 找不到 dist/style.css

Question

使用 webpack-dev-server，我可以在根路径 (0.0.0.0:8080) 加载 ./dist/index.html 并在 0.0.0.0:8080/bundle.js 查看 ./dist/bundle.js。我尝试加载时收到 404 (0.0.0.0:8080/style.css)。

./dist 目录中的 CSS 是由运行 node-sass 的 npm 命令生成的，而不是使用 webpack。

dist/
 - index.html
 - bundle.js
 - style.css

webpack.config.js

    const path = require('path');
    const MiniCssExtractPlugin = require("mini-css-extract-plugin")
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
      entry: "./src/index.ts",
      mode: "development",
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: "ts-loader",
            exclude: /node_modules/,
          },
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader, // instead of style-loader
              'css-loader'
            ]
          },
        ],
      },
      resolve: {
        extensions: ['.tsx', '.ts', '.js'],
      },
      plugins: [
        new MiniCssExtractPlugin(
          { 
            filename: './style.css' 
            //also tried: path.resolve(__dirname, "dist", "style.css") 
          }),
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "dist", "index.html"),
          inject: false
        })
      ],
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      },
    };

（来自https://blog.jakoblind.no/css-modules-webpack/）

我应该添加或更改什么，以便我的浏览器可以访问./dist/style.css 的 CSS 文件？

Answer 1

webpack-dev-server 实际上并不在磁盘上存储文件，它只是在运行中创建它们，然后将它们保存在内存中以响应 http 请求。所以默认情况下，它不会知道dist 中的任何内容；它只知道如何/在哪里提供它也可以生成的文件。

但是，您可以将其配置为从磁盘提供其他现有文件（并观察它们的更改），方法是将其添加到您的 webpack 配置中。在 Webpack 5 中：

devServer: {
  static: {
      directory: path.join(__dirname, 'dist')
  }
}

在 Webpack 4 中它被称为 contentBase:

devServer: {
  contentBase: path.join(__dirname, 'dist'),
  watchContentBase: true
}