为什么 Webpack 5 没有 CSS 文件输出？

Question

到处搜索了好几天，我仍然无法理解为什么我最新的尝试也不起作用。

为什么 dist 文件夹中没有 CSS 文件？

现在，我正在将样式导入到一个.js文件中，该文件稍后会导入到我的应用程序入口点中，但仍然什么也没有。

webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');

const path = require('path');

const paths = {
  src: path.resolve(__dirname, 'src'),
  dist: path.resolve(__dirname, 'dist'),
};

module.exports = {
  entry: 'index.js',
  mode: 'production',
  cache: false,
  output: {
    path: paths.dist,
    filename: 'index.js',
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name][ext][query]',
        },
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext][query]',
        },
      },
    ],
  },

  plugins: [
    new CleanWebpackPlugin(),

    new MiniCssExtractPlugin({
      filename: '[name][contenthash].css',
      chunkFilename: '[id].css',
      ignoreOrder: false,
    }),

    new CopyWebpackPlugin({
      patterns: [
        {
          from: paths.src + '/assets',
          to: paths.dist + '/assets',
          toType: 'dir',
          globOptions: {
            ignore: ['*.DS_Store', 'Thumbs.db'],
          },
        },
        {
          from: paths.src + '/mocks',
          to: paths.dist + '/mocks',
          toType: 'dir',
          globOptions: {
            ignore: ['*.DS_Store', 'Thumbs.db'],
          },
        } /*{
            from: paths.src + '/styles.css',
            to: paths.dist + '/styles.css',
        }*/,
      ],
    }),

    new HTMLWebpackPlugin({
      filename: 'index.html',
      template: paths.src + '/index.html',
      favicon: paths.src + '/favicon.ico',
    }),
  ],
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
  resolve: {
    modules: [paths.src, 'node_modules'],
    extensions: ['.js', '.jsx', '.json'],
  },
};

src/importCSSForBuild.js

import './styles.scss'

src/index.js

import './js/ConsoleLog.js';
import './importCSSForBuild.js'
[... other stuff]

包.json

....
"sideEffects": [
    "**/*.css",
    "src/importCSSForBuild.js"
  ],
  "scripts": {
    "postinstall": "npm run start",
    "start": "npm-run-all --parallel css serve",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "buildserve": "cross-env NODE_ENV=production webpack --config webpack.config.js && http-server ./dist -c-1 -p 8081",
    "test": "jest --no-cache ./src/*",
    "watch": "jest --no-cache --watch ./*",
    "coverage": "jest --coverage"
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/preset-env": "^7.16.11",
    "babel-jest": "^27.4.6",
    "babel-loader": "^8.2.3",
    "babel-preset-jest": "^27.4.0",
    "clean-webpack-plugin": "^4.0.0",
    "compression-webpack-plugin": "^9.2.0",
    "copy-webpack-plugin": "^10.2.2",
    "cross-env": "^7.0.3",
    "css-loader": "^6.6.0",
    "css-minimizer-webpack-plugin": "^3.4.1",
    "dead-server": "1.0.6",
    "html-webpack-plugin": "^5.5.0",
    "http-server": "^14.1.0",
    "jest": "^27.4.7",
    "mini-css-extract-plugin": "^2.5.3",
    "node-sass": "^7.0.1",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.2.3",
    "prettier": "^2.5.1",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.49.0",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2",
    "webpack-dashboard": "^3.3.7",
    "webpack-dev-server": "^4.7.3"
  },
  "engines": {
    "node": ">=14.15.0"
  }
}

Answer 1

我看到这个 Webpack 配置是在生产模式下运行 Webpack，并且您希望在与 javascript 分离的其他文件中发出 css，这样浏览器在发生更改时不必重新加载完整的应用程序（包括 css 和 js）仅在 js 文件中（加载故障）。

mini-css-extract-plugin，将 css 提取到一个单独的文件，并且该 css 文件链接到 .html 的 template 属性中定义的 html 文件HTMLWebpackPlugin。

在 的官方文档中MiniCSSExtractPlugin，提到我们需要MiniCSSExtractPlugin.loader将 css 与 css loader 一起提取到文件中。

在您的配置中，您使用了style-loader，因此我们需要将其更改为MiniCSSExtractPlugin.loader。

还提到我们不应该style-loader在加载器链中使用这个插件。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name][contenthash].css",
      chunkFilename: "[id].css",
      ignoreOrder: false,
    }),
    ,
    new HTMLWebpackPlugin({
      filename: "index.html",
      template: paths.src + "/index.html", // css will be linked in this file
      favicon: paths.src + "/favicon.ico",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader, // extract css into files
          "css-loader", // convert css to js string css
          "sass-loader", // convert sass to css
        ],
      },
    ],
  },
};

主要style-loader用于使用 style 标签在 dom 中添加/注入 css，而MiniCSSExtractPlugin.loader用于将 css 提取到文件中，并将同一 css 文件的链接标签添加到 HTMLWebpackPlugin 中指定的模板 html 文件中。