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

到处找了好几天，我还是不明白为什么我最近的认证也不起作用。

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

现在我正在导入一个.js文件中的样式，该文件稍后导入到我的应用程序入口点中，仍然没有任何内容。

网络包配置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'],
  },
};

源代码/导入用于构建.js的CSS

import './styles.scss'

源代码/索引.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"
  }
}

我看到这个Webpack配置是在生产模式下运行Webpack，你想在与javascript分离的其他文件中发出css，这样如果只有js文件发生变化（加载故障），浏览器就不必重新加载整个应用程序（包括css和js）。
mini-css-extract-plugin，将css提取到一个单独的文件中，并且该css文件链接到HTMLWebpackPlugin的template属性中定义的html文件。
在MiniCSSExtractPlugin的官方文档中提到，我们需要MiniCSSExtractPlugin.loader来将css与css加载器沿着提取到文件中。
在您的配置中，您使用的是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文件的link标签添加到HTMLWebpackPlugin指定的模板html文件中。

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

1条答案

相关问题

热门标签

最新问答