javascript - 多个配置文件中的 Webpack 加载器

Question

我有一个 Webpack 流程，其中根据构建类型合并多个配置。我仍然是一个 webpack 新手，但掌握了它的窍门 - 但遇到了一个问题。

通过设置，我有一些 css 加载器，它们在我的公共(public)流程中使用 - 即在每个构建中。现在我需要一些只用于生产构建的装载机。在我当前的设置中，从未使用过用于生产的加载程序 - 但如果我在我的常用设置中取消对加载程序的注释，则会运行生产加载程序。

有没有办法合并来自不同配置的 css 规则？

我的 webpack.config.js

const path = require('path');
const webpackMerge = require('webpack-merge');
const commonPartial = require('./webpack/webpack.common');
const clientPartial = require('./webpack/webpack.client');
const serverPartial = require('./webpack/webpack.server');
const prodPartial = require('./webpack/webpack.prod');
const { getAotPlugin } = require('./webpack/webpack.aot');

module.exports = function (options, webpackOptions) {
    options = options || {};
    webpackOptions = webpackOptions || {};

    if (options.aot) {
        console.log(`Running build for ${options.client ? 'client' : 'server'} with AoT Compilation`)
    }

    let serverConfig = webpackMerge({}, commonPartial, serverPartial, {
        entry: options.aot ? { 'main-server' : './Client/main.server.aot.ts' } : serverPartial.entry, // Temporary
        plugins: [
            getAotPlugin('server', !!options.aot)
        ]
    });

    let clientConfig = webpackMerge({}, commonPartial, clientPartial, {
        plugins: [
            getAotPlugin('client', !!options.aot)
        ]
    });

    if (options.prod) {
        // Change api calls prior to packaging due to the /web root on production
        clientConfig = webpackMerge({}, prodPartial, clientConfig);
        serverConfig = webpackMerge({}, prodPartial, serverConfig);
    }

    const configs = [];
    if (!options.aot) {
        configs.push(clientConfig, serverConfig);

    } else if (options.client) {
        configs.push(clientConfig);

    } else if (options.server) {
        configs.push(serverConfig);
    }

    return configs;
}

我的 webpack.common.js

const { root } = require('./helpers');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

/**
 * This is a common webpack config which is the base for all builds
 */

const extractBeneath = new ExtractTextPlugin('../assets/stylesheets/beneath.css');
const extractSkolePlan = new ExtractTextPlugin('../assets/stylesheets/skoleplan.css');

const source = path.resolve(__dirname, 'Client');
const appDirectory = path.resolve(source, 'app');

module.exports = {
    devtool: 'source-map',
    resolve: {
        extensions: ['.ts', '.js']
    },
    output: {
        filename: '[name].js',
        publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        rules: [
            { test: /\.ts$/, loader: '@ngtools/webpack' },

            {
                //***** This is working nicely *****
                test: /\.css$/,
                exclude: appDirectory,
                use: extractSkolePlan.extract({
                    fallback: 'to-string-loader',
                    use: 'css-loader?sourcemap'
                })
            },
            {
                //***** This is working nicely too *****
                test: /\.css$/,
                include: appDirectory,
                use: 'raw-loader'
            },
            { test: /\.html$/, loader: 'html-loader' },
            {
                test: /\.less$/,
                use: extractBeneath.extract({
                  fallback: 'to-string-loader',
                  use: ['css-loader', 'less-loader']
                })

            },

            { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' },
            { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=25000' }
        ]
    }
    ,
    plugins: [
        extractSkolePlan,
        extractBeneath
    ]
};

还有我的 webpack.prod.js

const { root } = require('./helpers');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const StringReplacePlugin = require("string-replace-webpack-plugin");


const source = path.resolve(__dirname, 'Client');
const appDirectory = path.resolve(source, 'app');
/**
 * This is a prod config to be merged with the Client config
 */


module.exports = {
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: StringReplacePlugin.replace({
                    replacements: [
                        {
                            pattern: /return window.location.origin;/ig,
                            replacement: function() {
                                console.log(' Her er javascript replaced');
                                return 'return window.location.origin + \'/web\'';
                            }
                        }
                    ]
                })
            },

            {

                //***** This is never loaded *****
                test: /\.css$/,
                exclude: appDirectory,
                use: StringReplacePlugin.replace({
                    replacements: [
                        {
                            pattern: /assets/ig,
                            replacement: function() {
                                console.log('Her er css skiftet');
                                return '/web/assets/martin';
                            }
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        // an instance of the plugin must be present 
        new StringReplacePlugin()
    ]
};

感谢任何帮助 - 谢谢 :-)

Answer 1

我不熟悉你使用的包，webpack-merge ，但是在测试的时候，类似于:

Object.assign({}, {foo: 'a'}, {foo: 'b'})//=> {foo: 'b'}

它优先考虑从右到左的对象。所以在你的例子中，它应该是:

if (options.prod) {
    // Change api calls prior to packaging due to the /web root on production
    clientConfig = webpackMerge({}, clientConfig, prodPartial);
    serverConfig = webpackMerge({}, serverConfig, prodPartial);
}

prodPartial 位于右侧，以便优先于 serverConfig 和 clientConfig 中的 commonPartial。

但是，我建议通过多次导入使这三个配置文件更容易推理，例如module.exports.output、module.exports.rules，并在主配置文件中手动进行合并。