在 webpack 中使用 mini-css-extract-plugin 输出 2 个（或更多）.css 文件

Posted 2023-03-07

【中文标题】在 webpack 中使用 mini-css-extract-plugin 输出 2 个（或更多）.css 文件

【英文标题】：Output 2 (or more) .css files with mini-css-extract-plugin in webpack

【发布时间】：2018-12-01 06:50:01

【问题描述】：

使用 webpack 2（或 3）时，我可以编写如下代码：

const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css');
const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css');

rules: [

   test: /\.scss$|\.css$/,
   include: path.resolve(__dirname, './styles/App.scss'),
   use: coreStyles.extract(
       use: ['css-loader', 'sass-loader']
   )
,

   test: /\.scss$|\.css$/,
   exclude: path.resolve(__dirname, './styles/App.scss'),
   use: componentStyles.extract(
       use: ['css-loader', 'sass-loader']
   )

]

结果，我在输出中得到了 2 个 css 文件。

如何使用mini-css-extract-plugin 达到同样的效果？根据文档，我只能指定一个文件名：

plugins: [
    new MiniCssExtractPlugin(
        filename: "[name].css",
    )
]

谢谢。

【参考方案1】：

这个例子也符合 SCSS 并且不使用 MiniCssExtractPlugin

在 Webpack 4.16.5 中，我首先安装了这 2 个包，以使其能够正常工作

npm install --save-dev file-loader
npm install --save-dev extract-loader

然后在你的 webpack.config.js 中

//const MiniCssExtractPlugin = require("mini-css-extract-plugin");

var path = require("path");

module.exports = 
    entry: ['./blocks.js', './block.editor.scss', './block.style.scss'],
    mode: 'production',//change to 'development' for non minified js
    output: 
        path: path.resolve(__dirname, "dist"),
        filename: 'blocks.build.js',
        publicPath: "/dist"
    ,
    watch: true,
    module: 
        rules: [
            
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            ,
            
                test: /\.scss$/,
                use: [
                    
                        loader: 'file-loader',
                        options: 
                            name: '[name].build.css',
                            context: './',
                            outputPath: '/',
                            publicPath: '/dist'
                        
                    ,
                    
                        loader: 'extract-loader'
                    ,
                    
                        loader: 'css-loader',
                    ,
                    
                        loader: 'sass-loader',
                        options: 
                            sourceMap: true
                        
                    
                ]
            ,
        ],
    ,
;

这将输出以下结构

为了缩小 CSS 安装

npm install --save-dev uglifyjs-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin

添加到 webpack.config.js

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

var path = require("path");

module.exports = 
    //...
    watch: true,
    module: 
        rules: [
            //...
        ],
    ,
    optimization: 
        minimizer: [
            new UglifyJsPlugin(
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            ),
            new OptimizeCSSAssetsPlugin()
        ]
    ,
;

希望对你有帮助

【讨论】：

这对我来说效果很好，我花了好几个小时才终于找到这个

同意，使用 scss 入口点并期望输出一个 css 文件（没有任何箔条）似乎是一个常见的用例（尽管可能不是打算）。感谢您发布答案。我正在从这里的旧设置迁移，这很有帮助。

这可行，但会弄乱字体。如何加载 GoogleFont？

这破坏了我项目中的字体。有任何想法吗？字体在 google apil 的 css 中

我尝试了这个设置，它工作得很好，除了我无法为每个块创建 html 生成的链接标签。有什么解决办法吗？