のWebPACK：私は今のところ、非常に特殊な方法で分割する必要があり、従来のアプリケーションで作業webworkerと複数のチャンク

Question

でcommonchunksplugin： 簡略化された場合は、次のとおりです。 私は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); 

を

• manifest.jsのみ番目含まWebPACKの
• moduleA.jsの共通ランタイムが含まれています。私が行う必要がある何

  は、5つのファイルの出力を持つことですモジュールAおよびモジュールBのコードとWebPACKのランタイム

が含まmoduleC

webworkerModule.jsのコードのみが含まmoduleB

moduleC.jsのコードのみが含まmoduleA

moduleB.jsのEコード私は複数の設定を試みましたが、私が望むものを得ることができません。

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

このソリューションの主なポイントは、私は複数の独立した構成を持つことが可能であったことを知らなかったということでした。