Как я могу проверить вывод слияния webpack

Question

Я пытаюсь запустить компилятор Google Closure для своих ресурсов веб-пакета, но получаю предупреждения о проблемах в загрузчиках стилей веб-пакета. Но я подумал, что загрузчики стилей не будут находиться ни в одном из ресурсов js, так как я использовал MiniCssExtractPlugin для получения отдельного файла css.

Два вопроса:

• как мне получить доступ к выводу файла webpack.config.js в производственном режиме? (Могу ли я сделать что-то в командной строке, чтобы увидеть, каков результат слияния?)
• как мне заставить слияние работать так, как я ожидал, т.е. не использовать style-loader для производства?

Код:

const merge = require("webpack-merge");

var common = {
    ....
    module: {
        rules: [
            {
                test: /\.scss$/,
                exclude: [/elm-stuff/, /node_modules/],
                // see https://github.com/webpack-contrib/css-loader#url
                loaders: ["style-loader", "css-loader?url=false", "sass-loader"]
            },
            {
                test: /\.css$/,
                exclude: [/elm-stuff/, /node_modules/],
                loaders: ["style-loader", "css-loader?url=false"]
            },
...

if (MODE === "production") {
    module.exports = merge(common, {
        optimization: {
            minimizer: [
              new ClosurePlugin({mode: 'STANDARD'}, {})
            ]
          },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    exclude: [/elm-stuff/, /node_modules/],
                    loaders: [
                        MiniCssExtractPlugin.loader,
                        "css-loader?url=false"
                    ]
                },
                {
                    test: /\.scss$/,
                    exclude: [/elm-stuff/, /node_modules/],
                    loaders: [
                        MiniCssExtractPlugin.loader,
                        "css-loader?url=false",
                        "sass-loader"
                    ]
                }
            ]
        }

Answer 1

У меня была такая же проблема (я использую webpack 4). Моя конфигурация разделена на 3 файла: общие, dev и prod; как руководство веб-пакета объясняет ;

Чтобы зарегистрировать объединенный конфиг, вы можете сделать что-то вроде:

var merged_config = merge(common, {
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [ 
                    MiniCssExtractPlugin.loader,
                    'css-loader', 
                    'less-loader'
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
});

module.exports = merged_config;

console.log(JSON.stringify(merged_config));

И, как вы можете видеть из приведенного выше кода, я переопределяю правила для генерации пакета CSS в производственном режиме. Внутри моего общего конфига, у меня есть это:

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
            },
            { 
                test: /\.html$/, 
                loader: 'raw-loader' 
            },
            {
                test: /\.less$/,
                use: [ 
                    'style-loader',
                    'css-loader', 
                    'less-loader'
                ],
            }
        ]
    },

И все работает как я ожидал!