webpack：帶有webworker和多個塊的commonchunksplugin

Question

我正在開發一個遺留應用程序，目前必須以一種非常具體的方式進行拆分：一個簡化的案例是：我有4個模塊：

//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);

我需要做的是輸出5個文件：

• manifest.js包含webpack的公共運行時
• moduleA.js只包含moduleA.js的代碼
• moduleB.js只包含moduleB.js的代碼
• moduleC.js只包含moduleC.js的代碼
• webworkerModule.js ，包含模塊A和模塊B的代碼以及webpack運行時

我嘗試了多種配置，但我無法獲得我想要的東西。

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;

例如，上面的配置生成了正確的webworkerModule.js，但是moduleA和moduleB在每個其他文件中都是重復的。

有人對此有任何見解嗎？

Answer 1

我找到了解決方案：

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];

這個解決方案的要點是我不知道有多個獨立配置是可能的。