Question

我试图在webpack中生成两倍数量的包/块，唯一的区别是一个加载includePaths的IE9样式而另一个没有，然后我懒加载一个包或其他取决于浏览器。我已经将延迟加载部分缩小了，但我不确定如何生成所有捆绑包。这是标准配置，其中相关部分是scss加载器，而appPaths变量设置在顶部：

var fs      = require('fs'),
    path    = require('path'),
    webpack = require('webpack'),
    apps = fs.readdirSync('./app');
    appModuleRegex = new RegExp("^(" + apps.join('|') + ")/(.*)$"),
    appPaths = apps.map(function(appName) {
        return 'app/' + appName + '/src';
    });

entrypoints = {};

apps.forEach(function(appName) {
    entrypoints[appName] = [ 'webpack/hot/dev-server', appName + '/app' ]
});

entrypoints['vendor'] = [
    'classnames',
    'd3',
    'fetch',
    'lodash',
    'moment',
    'react',
    'react-router',
    'react-select',
    'zxcvbn2',
];

module.exports = {
    entry: entrypoints,
    output: {
        path: '/web/dist',
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /\.test.js$|node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 versions","ie >= 9"]}'
            },
            {
                test: /\.scss$/,
                loader: 'style!css!autoprefixer-loader?{browsers:["last 2 versions","ie >= 9"]}!sass?includePaths[]=' + appPaths.join(',')
            },
            {
                test: /\.svg$/,
                exclude: /\.file\.svg$/i,
                loader: 'raw-loader'
            },
            {
                test: /\.file\.svg$|\.(jpe?g|png|gif)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            }
        ]
    },
    resolveLoader: {
        root: path.join(process.cwd(), "node_modules")
    },
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        alias: {
            'fetch': '/web/node_modules/whatwg-fetch/fetch'
        }
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
        new webpack.NormalModuleReplacementPlugin(appModuleRegex, function(result) {
            result.request = result.request.replace(appModuleRegex, "/web/app/$1/src/$2");
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: '/web/dist/',
        host: '0.0.0.0',
        watchOptions: {
            aggregateTimeout: 500,
            poll: 500
        },
        stats: {colors: true}
    }
}

我想做的唯一改变是在顶部：

appPaths = apps.map(function(appName) {
    // change to ie9-styles
    return 'app/' + appName + '/src/ie9-styles';
});

您可以看到更改scss加载程序以查看其他目录以正确加载IE9样式。如何一次生成所有这些包而不是其中一个？

一次生成两个具有略微不同配置的webpack包

0 个答案: