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 仅包含moduleB
moduleB.js 仅包含moduleC
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];

这个解决方案的要点是我不知道可以进行多次独立配置。

webpack：带有webworker和多个块的commonchunksplugin

1 个答案: