Question

我正在开发一个使用Webpack，CSS模块和PostCSS（带有多个插件）的项目。在生产模式下，将为每个组件生成CSS文件。效果很棒。

我的许多组件的CSS文件都依赖于从未从应用程序直接加载的其他配置CSS文件组成它们的类。他们引入了标题大小，颜色，网格布局等内容。

这一切对于应用程序本身都非常有用，但是还有另外一个缺失的部分。我需要通过postcss-loader，css-loader和MiniCssExtractPlugin.loader运行所有这些配置文件，并将它们作为静态CSS文件输出到特定目录中。

基本上，我需要将目录中的所有CSS文件作为目标，通过加载程序运行它们，然后将它们输出到另一个目录中，并保留其原始文件名。

我有一种曾经用于Webpack 3.x的方法，但是在升级到Webpack 4之后，它不再起作用。

与Webpack 3.x兼容的旧方法：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractCSS = new ExtractTextPlugin('./static/ee/styles/[name]');

export default {
    mode: 'production',

    entry: {
        'ee.css': path.join(process.cwd(), 'app/styles/ee.base.css'),
        'ee.introduction.css': path.join(process.cwd(), 'app/styles/ee.introduction.css')
    },

    output: {
        path: path.join(process.cwd(), './'),
        filename: './static/ee/styles/[name]'
    },

    module: {
        rules: [{
            // Transform our own .css files with PostCSS and CSS-modules
            test: /\.css$/,
            exclude: /node_modules/,
            use: ExtractCSS.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader' },
                    { loader: 'postcss-loader', options: { config: { path: path.join(process.cwd(), 'postcss.config.js') } } }
                ]
            })
        }]
    },

    plugins: [
        ExtractCSS
    ]
};

无效的新方法：

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

export default {
    mode: 'production',

    entry: {
        'ee.css': path.join(process.cwd(), 'app/styles/ee.base.css'),
        'ee.introduction.css': path.join(process.cwd(), 'app/styles/ee.introduction.css'),
        'ee.language.css': path.join(process.cwd(), 'app/styles/ee.language.css')
    },

    output: {
        path: path.join(process.cwd(), './'),
        filename: './static/ee/styles/[name]'
    },

    module: {
        rules: [{
            // Transform our own .css files with PostCSS and CSS-modules
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader' },
                { loader: 'postcss-loader', options: { config: { path: path.join(process.cwd(), 'postcss.config.js') } } }
            ]
        }]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: './static/ee/styles/[name].css'
        })
    ]
};

我知道从技术上讲，这不是Webpack的目的，但是我不确定如果需要通过加载程序运行这些文件，我的选择是什么。

有什么建议吗？

使用Webpack 4和MiniCssExtractPlugin处理和输出许多CSS文件

0 个答案: