Использование Webpack 4 и MiniCssExtractPlugin для обработки и вывода многих CSS-файлов - PullRequest
Новая
       73

Использование Webpack 4 и MiniCssExtractPlugin для обработки и вывода многих CSS-файлов

0 голосов
/ 18 сентября 2018

Я работаю над проектом, в котором используются Webpack, CSS Modules и 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, но я не уверен, какие у меня есть варианты, если мне нужно запустить эти файлы через загрузчики.

Любые предложения

...