mini-css-extract-plugin

Posted 2023-05-16

参考技术A

mini-css-extract-plugin 在 webpack4 中代替 extract-text-webpack-plugin ，此插件是 将 CSS 样式提取到单独的文件 中。 它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。即通过 JS 文件中 import 进来的样式文件。它支持 CSS 和 SourceMaps 的按需加载。

是建立在新的 webpack v4 功能（模块类型）之上，并且需要在 webpack 4 版本才能工作。

相比 extract-text-webpack-plugin ：

基本配置如下（webpack.config.js）：

高级配置如下（既可以在开发中使用 HMR，也可以在生成版本的文件中提取样式）：

生产环境优化压缩（production）
缩小输出，要使用像 optimize-css-assets-webpack-plugin 这样的插件。 设置 optimization.minimizer 会覆盖 webpack 提供的默认值，因此确保要指定 JS minimalizer ：

将所有 CSS 样式提取到单个文件中，与 extract-text-webpack-plugin 类似，可以使用 optimization.splitChunks.cacheGroups 。

还可以根据 webpack 的 entry name 来提取CSS，这对你动态引入路由，却想依据 entry 保存打包的 CSS 的情况十分有用。这也解决了 ExtractTextPlugin 中 CSS 重复的问题。

特别注意 ：

一起使用 mini-css-extract-plugin 和 style-loader

【中文标题】一起使用 mini-css-extract-plugin 和 style-loader

【英文标题】：using mini-css-extract-plugin and style-loader together

【发布时间】：2019-09-04 18:54:44

【问题描述】：

我是 webpack 的新手，并遵循一些教程来学习基础知识。

我想在开发期间使用 style-loader 注入样式表（启用 HMR），并希望将 MiniCssExtractPlugin 用于生产构建。但是当我使用 MiniCssExtractPlugin 插件时，我失去了 style-loader 的注入功能。

请查看我的 webpack 配置：

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = 
    entry: ['./src/index.js'],
    output: 
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist')
    ,
    module: 
        rules: [
            
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 
                    loader: "babel-loader"
                
            ,
            
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                   
                        loader: MiniCssExtractPlugin.loader,
                        options: 
                            hmr: process.env.NODE_ENV === 'development'
                        
                    ,
                    "css-loader",
                    "sass-loader"
                ]
            
        ]
    ,
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin(
            filename: '[name].css',
            chunkFilename: '[id].css'
        )
    ],
    devServer: 
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        hot: true,
        port: 3000
    
;

【问题讨论】：

“但是当我使用 MiniCssExtractPlugin 插件时，我失去了 style-loader 的注入功能” - 你是什么意思？在上一句中你提到你想要dev mode 中的style-loader 和prod mode 中的MiniCssExtractPlugin。你的要求不清楚。请澄清

【参考方案1】：

在webpack.config.js 中分配给module.exports 的函数的第二个参数包含mode 标志（--mode [development|production]）。所以这里可以使用模式来加载MiniCssExtractPlugin.loader或者style-loader。

在开发过程中，使用style-loader 比每次都提取样式要快。但是在生产中，您应该将样式提取到单独的文件中，以避免在您的网页中出现加载故障，当样式在 HTML 之后加载时，您会看到您的页面暂时没有样式。

module.exports = (_,  mode ) => (
  // other options here
  module: 
    rules: [
      // other rules here
      
        test: /\.s?css$/i,
        use: [
          mode === 'production'
            ? MiniCssExtractPlugin.loader
            : 'style-loader',
          'css-loader',
          'sass-loader'
        ],
      ,
    ],
  ,
);

【讨论】：

请添加一些解释，说明您答案中的代码的作用以及为什么它应该解决问题

【参考方案2】：

如果你喜欢为一个开发环境使用一个特定的加载器，另一个用于生产环境，那么我建议你webpack-merge，这将允许你基于 env.mode 变量编写两个单独的 webpack 配置文件 这是一个例子：

这是我的主要 webpack 配置文件：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpackMerge = require("webpack-merge");
const path = require("path");

const modeConfig = env => require(`./build-utils/webpack.$env`)(env);

module.exports = ( mode  =  mode: "production" ) =>
  webpackMerge(
    
      mode,
      entry: ['./src/index.js'],
      output: 
        filename: 'app.js',
        path: path.resolve(__dirname, "dist")
      ,
      module: 
        rules: [
          
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: 
                loader: "babel-loader"
            
        
        ]
      ,
      plugins: [
        new MiniCssExtractPlugin(
            filename: '[name].css',
            chunkFilename: '[id].css'
        )
      ]
    ,
    modeConfig(mode)
  );

正如您在第 6 行中看到的，我声明了一个 modeConfig 变量，它是一个函数，它根据通过 cli 命令传递的 env 变量返回 require 的值。

现在在 build-utils 文件夹下创建你的 webpack.production.js 这个文件夹将只包含生产 evn 的配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   module.exports = () => (
        module: 
        rules: [
            
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            
        ]
    
   );

接下来是你的开发配置文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = () => (
            module: 
            rules: [
                
                    test: /\.(sass|scss)$/,
                    use: [
                        
                           loader: MiniCssExtractPlugin.loader,
                           options: 
                             hmr: true // since u know this is dev env
                           
                        ,
                        "css-loader",
                        "sass-loader"
                    ]
                
            ]
        ,
        devServer: 
          contentBase: path.join(__dirname, 'dist'),
          compress: true,
          hot: true,
          port: 3000
         
       );

现在你只需要运行命令

webpack --env.mode=production

或

webpack --env.mode=development

【讨论】：

为了缩小 CSS 3 和生产中的 Javascript 文件，我需要导入 const TerserPlugin = require("terser-webpack-plugin"); 并将其设置为 optimization: minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()], ,，否则只有 CSS 3 文件被缩小

【参考方案3】：

MiniCssExtractPlugin says 实际上你不能这样做：

这个插件应该只用于在加载器链中没有 style-loader 的生产版本，特别是如果你想在开发中使用 HMR。