webpack：带有webworker和多个块的commonchunksplugin

Question

I work on a legacy application that, for now, have to be split in a very specific way: A simplified case is : I have 4 modules:

//moduleA.js
export const moduleA = ['moduleA'];


//moduleB.js
import {moduleA} from './moduleA';
export const moduleB = ['moduleB'].concat(moduleA);


//moduleC.js
import {moduleA} from './moduleA';
import {moduleB} from './moduleB';
export const moduleC = ['moduleC'].concat(moduleA).concat(moduleB);


//webworkerModule.js
import {moduleB} from './moduleB';
import {moduleA} from './moduleA';

console.log("Webworker Module", moduleA, moduleB);

What I need to do is to have an output of 5 files:

• manifest.js that contain the common runtime of webpack
• moduleA.js that contains only the code of moduleA
• moduleB.js that contains only the code of moduleB
• moduleC.js that contains only the code of moduleC
• webworkerModule.js that contains the code of module A and module B and the webpack runtime

I tried multiple configuration, but I cannot obtain what I want.

const path = require('path');
const webpack = require('webpack');

const config = {
    entry:{
        moduleA:'./src/moduleA.js',
        moduleB:'./src/moduleB.js',
        moduleC:'./src/moduleC.js',
        webworkerModule:'./src/webworkerModule.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.js']
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'webworkerModule',
            chunks: ['webworkerModule'],
            minChunks: Infinity
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['moduleA', 'moduleB', 'manifest'],
            chunks: ['moduleA', 'moduleB', 'moduleC'],
            minChunks: Infinity
        })
    ]
};

module.exports = config;

The above configuration for example produce the correct webworkerModule.js, but moduleA and moduleB is duplicated in every other files.

Has someone any insight about this ?

Answer 1

I found a solution:

const path = require('path');
const webpack = require('webpack');

const configWW = {
    entry:{
        webworkerModule:'./src/webworkerModule.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.js']
    },
};

const configOthers =  {
    entry: {
        moduleA:'./src/moduleA.js',
        moduleB:'./src/moduleB.js',
        moduleC:'./src/moduleC.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.js']
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['moduleB', 'moduleA', 'manifest'],
            minChunks: Infinity
        })
    ]
};

module.exports = [configWW, configOthers];

The main point of this solution was that I didn't know that it was possible to have multiple independent configuration.