i18n with Code splitting for vendor libraries

[mgurnani]

Hello,

Thank you for a nice plugin. I need help on an issue I am running into when using it - with code splitting using commons chunk, it generates multiple bundles for the vendor library - one for each language.

Here;s my webpack snippet:

var languages = {
    "en": require("./src/en.json"),
    "it": require("./src/it.json")
};
var config = Object.keys(languages).map(function (language) {
    return {
        name: language,
        resolve: {
            modules: [path.resolve(__dirname, "src"), "node_modules"]
        },
        context: path.resolve(__dirname, "src"),

        entry: {
            "vendor": ['jquery', 'bootstrap'],
            "login": './js/login.js'
        },
        output: {
            filename: 'js/' + language + '.[name].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/dist/dn'
        },
       .....  
        plugins: [
            new I18nPlugin(languages[language]),
            extractPlugin,
            new webpack.optimize.CommonsChunkPlugin({
                name: "vendor"
            }),

When I build, I see 2 vendor bundles - though they are same. Is there a way to exclude the vendor bundle from i18n ?

[vivek12345]

@mgurnani The problem here seems with your webpack.config file and not i18n. You have vendor bundle in your entry object and CommonsChunkPlugin both. Remove the vendor entry from entry object file.That should solve your problem.

[mgurnani]

@vivek12345 : I am not clear -"vendor" bundle in my case packs 2 libraries . If I remove the vendor entry from "entry" objects, then how will the vendor bundle be created ? How will CommonsChunk know which libraries to pack together?

[vivek12345]

@mgurnani Now your common chunks plugin is working in its default mode.In general when people use common chunks plugin, they also specify a property by the name minChunks. To answer your question, commonChunksPlugin based on the minChunks property will create a separate bundle for you with the name that you have given, in your case it would be vendor.js. Now, what all modules will it include inside vendor depends on how you configure it.

I generally put my node_modules which are my external vendor libraries inside vendor bundle by the following webpack syntax:-

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: isProd ? '[name]-[hash].min.js' : '[name].dev.js',
    minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
            module.resource &&
            /\.js$/.test(module.resource) &&
            module.resource.indexOf(
                path.join(__dirname, '../node_modules')
            ) === 0
        )
    }
})

[mgurnani]

Thanks Vivek. I will try it out. Hopefully it will solve the problem. I am closing the issue for now..

[ValentinH]

Hi @mgurnani, did it solve your problem? :)

[mgurnani]

@ValentinH : Nope. I tried the config shared here but my vendor bundle was generated incorrectly - it did not have any libraries included. For now I am still working with 2 vendor bundles.

[ValentinH]

Ok thanks for the answer