为什么Webpack 5中没有CSS文件output？

Question

Searched everywhere and for days now and I still can't manage to understand why my latest attepmpt also doesn't work.

Why isn't there a CSS file on dist folder?

Now I am importing the styles in a .js file that is later imported in my app entry point and still nothing.

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]

package.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

I see this webpack config is to run the webpack in production mode and you want to emit the css in other file separated from the javascript so the browser don't have to reload the full application (including css and js) if there is a change only in js files (loading glitches).

mini-css-extract-plugin , extracts the css to a separate file and that css file is linked to your html file defined in the template property of HTMLWebpackPlugin .

In the official documentation of MiniCSSExtractPlugin , it is mentioned that we need MiniCSSExtractPlugin.loader to extract css into file(s) along with the css loader.

In your config, you used style-loader , so we need to change it to MiniCSSExtractPlugin.loader .

It is also mentioned that we should not use this plugin with style-loader in loaders chain.

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
        ],
      },
    ],
  },
};

The style-loader is mainly used to add/inject css in the dom using style tag whereas MiniCSSExtractPlugin.loader is used to extract css into file and add the link tag for the same css file into the template html file specified in the HTMLWebpackPlugin.