Webpack loaders in multiple config files

Question

I have a Webpack flow where multiple configurations are merged depending on the type of build. I'm still a webpack newbie but getting the hang of it - but ran into a problem.

With the setup I have som css loaders which are used in my common flow - that is on every build. Now I need some loaders only used for production builds. With my current setup the loaders for production is never used - but if I outcomment the loaders in my common setup the production loaders are run.

Is there a way to merge rules for css from different configurations?

My 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;
}

My 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
    ]
};

And my 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()
    ]
};

Any help is appreciate - thanks :-)

Answer 1

I am not familiar with the package you are using, webpack-merge , but when testing, it is similar to:

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

It gives priority to the objects from right to left. So in your example, it should be:

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

With prodPartial at the right, in order to get preference over the commonPartial inside serverConfig and clientConfig .

However, I would advise to make these three configuration files easier to reason about by having several imports, eg module.exports.output , module.exports.rules , and do the merging manually in the main config file.