使用Webpack 4将多个（sass | css）文件编译成多个CSS输出

Question

我有一个WP Theme项目。我正在使用Webpack 4编译sass文件并将其与css合并。

项目结构

dev
|_ my-theme
   |_css
   | |_common
   | | |_main.sass
   | | |_normalize.css
   | |_home
   |   |_home.sass
   |_style.sass

我想这样编译：

1. dist / my-theme / style.css = style.sass以正确的顺序包括normalize.css和main.sass

2. dist / my-theme / css / home / home.css = home.sass

目前，我设法在第一点上做了独特的输出。我看到extract-text-webpack-plugin有一个解决方案，但Webpack 4弃用了该解决方案，所以我在使用extract-text-webpack-plugin，但我不知道该怎么做。

我当前的webpack.config.js

mini-css-extract-plugin

Answer 1

我找到了使用mini-css-extract-plugin的解决方案。解决方案是

const PLUGIN_DIR_NAME = "mytheme";
const GENERAL_CONFIG_INI = "../config/config.ini";
const THEME_CONFIG_INI = "./config/config.ini";

const path = require('path');
const Promise = require('bluebird');
const fs = Promise.promisifyAll( require('fs') );
const ini = require('ini');
// include the css extraction and minification plugins
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = env => {
    const global_config = ini.parse( fs.readFileSync( GENERAL_CONFIG_INI, 'utf-8' ) );
    const theme_config = ini.parse( fs.readFileSync( THEME_CONFIG_INI, 'utf-8' ) );

    var a_author_uri = global_config.author_uri.split(":");
    var author_protocol = a_author_uri[0];
    var author_uri_without_protocol = a_author_uri[1].replace( "//", "" );
    var a_author_uri_domain = author_uri_without_protocol.split(".");
    var author_uri_domain_name, author_uri_extension;
    if( a_author_uri_domain.length === 3 ){
        author_uri_domain_name = a_author_uri_domain[1];
        author_uri_extension = a_author_uri_domain[2];
    }else if( a_author_uri_domain.length === 2 ){
        author_uri_domain_name = a_author_uri_domain[0];
        author_uri_extension = a_author_uri_domain[1];
    }
    var a_prev_theme_version = theme_config.theme_infos.version.split(".");
    var prev_major_theme_version = parseInt( a_prev_theme_version[0] );
    var prev_minor_theme_version = parseInt( a_prev_theme_version[1] );
    var prev_patch_theme_version = parseInt( a_prev_theme_version[2] );
    var prev_build_theme_version = parseInt( a_prev_theme_version[3] );
    var next_build_theme_version, next_patch_theme_version, next_minor_theme_version, next_major_theme_version;
    if( env.version === "build" ){
        next_build_theme_version = prev_build_theme_version + 1;
        next_patch_theme_version = prev_patch_theme_version;
        next_minor_theme_version = prev_minor_theme_version;
        next_major_theme_version = prev_major_theme_version;
    }else if( env.version === "patch" ){
        next_build_theme_version = 0;
        next_patch_theme_version = prev_patch_theme_version + 1;
        next_minor_theme_version = prev_minor_theme_version;
        next_major_theme_version = prev_major_theme_version;
    }else if( env.version === "minor" ){
        next_build_theme_version = 0;
        next_patch_theme_version = 0;
        next_minor_theme_version = prev_minor_theme_version + 1;
        next_major_theme_version = prev_major_theme_version;
    }else if( env.version === "major" ){
        next_build_theme_version = 0;
        next_patch_theme_version = 0;
        next_minor_theme_version = 0;
        next_major_theme_version = prev_major_theme_version + 1;
    }
    theme_config.theme_infos.version = next_major_theme_version + "." + next_minor_theme_version + "." + next_patch_theme_version + "." + next_build_theme_version;
    fs.writeFileSync( THEME_CONFIG_INI, ini.stringify( theme_config, {} ) );

    return{
        plugins: [
            new CleanWebpackPlugin(),
            // extract css into dedicated file
            new MiniCssExtractPlugin({
                filename: './' + PLUGIN_DIR_NAME + '/style.css'
            }),
            //Only copy php files
            new CopyPlugin([
                {
                    from: 'dev',
                    ignore: ['*.sass', 'next/css/common/**/*.css'],
                },
            ])
        ],
        entry: [ './dev/' + PLUGIN_DIR_NAME + '/style.sass', './dev/' + PLUGIN_DIR_NAME + '/css/common/normalize.css', './dev/' + PLUGIN_DIR_NAME + '/css/common/main.sass' ],
        output: {
            path: path.resolve(__dirname, 'dist/'),
        },
        module: {
            rules: [
                // compile all .scss files to plain old css
                {
                    test: [/css\/common\/.*\.(css|sass)$/],
                    use: [{loader: MiniCssExtractPlugin.loader},
                        {loader: 'css-loader'},
                        {
                            loader: 'sass-loader',
                            options: {
                                prependData: '$theme-name: ' + theme_config.theme_infos.name +
                                    ';$author:' + global_config.author +
                                    ';$author-uri-protocol:' + author_protocol +
                                    ';$author-uri-domain:' + author_uri_domain_name +
                                    ';$author-uri-extension:' + author_uri_extension +
                                    ';$description:' + theme_config.theme_infos.description.replace(/:/g, "%3A").replace(/;/g, "%3B") + ';' +
                                    ';$version-major:' + next_major_theme_version + ';' +
                                    ';$version-minor:' + next_minor_theme_version + ';' +
                                    ';$version-patch:' + next_patch_theme_version + ';' +
                                    ';$version-build:' + next_build_theme_version + ';',
                            }
                        }
                    ]
                }
            ]
        }
    }
};

。

基本上，您可以使用对象将json数组更改为MiniCssExtractPlugin值。

前

here

后

entry

如果您希望其中一个css文件位于子目录内，例如entry: [ './dev/' + PLUGIN_DIR_NAME + '/style.sass', './dev/' + PLUGIN_DIR_NAME + '/css/common/normalize.css', './dev/' + PLUGIN_DIR_NAME + '/css/common/main.sass' ], ：

entry:{
    style: [ './dev/' + PLUGIN_DIR_NAME + '/style.sass', './dev/' + PLUGIN_DIR_NAME + '/css/common/normalize.css', './dev/' + PLUGIN_DIR_NAME + '/css/common/main.sass' ],
    home: [ './dev/' + PLUGIN_DIR_NAME + '/css/home/home.sass' ]
},