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 是通过 npm 命令运行 node-sass 生成的，没有使用 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 中的任何内容；它只知道 how/where 提供它也可以生成的文件。

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

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

在 Webpack 4 中它被称为 contentBase:

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

Webpack 找不到 dist/style.css

Webpack cannot find dist/style.css

webpack

webpack-dev-server

webpack.config.js