Question

我有一个Webpack流程，根据构建类型合并多个配置。我仍然是一个网络新手，但却掌握了它 - 但遇到了问题。

通过设置，我有一个som css加载器，用于我的共同流程 - 即每个构建。现在我需要一些仅用于生产构建的加载器。在我目前的设置中，生产的装载机从未使用过 - 但如果我在常规设置中取消装载机，则会运行生产装载机。

有没有办法合并来自不同配置的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，以便优先于commonPartial和serverConfig内的clientConfig。

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

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

1 个答案: