Webpack: how to bundle entries to multiple common chunks with CommonsChunkPlugin?

Viewed 12458

Say I have two pages Page1 and Page2, both of them use some library(vendors) like jquery backbone which I want to be extracted as a single file, then I want the shared modules(exclude the vendors) to be extracted in another single file, this is the webpack config:

function listFiles(srcpath) {
    return fs.readdirSync(srcpath).filter(function (file) {
        return fs.statSync(path.join(srcpath, file)).isDirectory();
    });
}
var createEntry = function (src) {
    var dest = {
        vendor: ["backbone", "underscore"]
    };
    var files = listFiles(src);
    files.forEach(function (dir) {
        var name = dir;
        dest[name] = src + "/" + dir + "/entry.js";
    });
    return dest;
};

//each sub directory contains a `entry.js` as the entry point for the page
var entries = createEntry("./app/pages");//    {vender:['jquery','backbone'],page1:'src/page1/entry.js',page2:'src/page2/entry.js'    }

var config = {
    resolve: {
        root: path.resolve('./app/'),
        extensions: ['', '.js']
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'common.js',
            minChunks: 2
        })
    ],
    entry: entries,
    output: {
        path: './../main/webapp/static/dist',
        filename: '[name].js',
        publicPath: '/static/dist'
    }
};
module.exports = config;

However with the above config:

common.js contains webpack runtime,

page1.js contains page1 specified modules and shared modules

page2.js contains page2 specified modules and shared modules

Which means page1.js and page2.js contains too many repeat codes.

Then I tried to change the config:

var entries = createEntry("./app/pages");
var chunks = [];
for (var k in entries) {
    if (k === 'vendor')
        continue;
    chunks.push(k);
}


new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: 'common.js',
    minChunks: 2,
    chunks:chunks
}),

Then

common.js contains the webpack runtime and the vendor libraries, and the shared modules

vendor.js contains the webpack runtime and the vendor libraries.

page1.js contains page1 specified modules

page2.js contains page2 specified modules

It seems it get closer, but the common.js should not contain the vendors

Anything wrong?

1 Answers
Related