Webpack＆TypeScript CommonsChunkPluginが動作しない

Question

私はCommonsChunkPluginを設定するためのいくつかのガイドラインに従ってきましたが、動作していないようです。私はここでも他の記事を検索して読んだことがありますが運がありません。

私は3つのファイル（TypeScript）を持ち、同じライブラリ（fancybox、moment、pikaday）のうちのいくつかをインポートしています。彼らは、ESモジュールの構文を使用してインポートされています：

import * as fancybox from 'fancybox'; 
import * as moment from 'moment'; 
import * as pikaday from 'pikaday'; 

マイtsconfig.json出力ES6の構文とモジュールに設定されています：

{ 
    "compileOnSave": true, 
    "compilerOptions": { 
     "target": "es6", 
     "module": "es6", 
     "noEmitOnError": true, 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "diagnostics": false, 
     "noFallthroughCasesInSwitch": true, 
     "noImplicitReturns": true, 
     "traceResolution": false 
    }, 
    "exclude": [ 
     "node_modules", 
     "venue-finder" 
    ] 
} 

マイwebpack.config.js：

const webpack = require('webpack'); 
const path = require('path'); 
const WebpackNotifierPlugin = require('webpack-notifier'); 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 

module.exports = [{ 
    bail: true, 
    entry: { 
     global: path.resolve(__dirname, 'js/responsive/global.ts'), 
     todo: path.resolve(__dirname, 'js/todo/todo.ts'), 
     budget: path.resolve(__dirname, 'Planner/javascript/Budget/BudgetPlannerUI.ts'), 
     promotions: path.resolve(__dirname, 'js/promotions-management.ts'), 
     planner: path.resolve(__dirname, 'Planner/javascript/MyPlanner.ts') 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist/js'), 
     filename: '[name].js' 
    }, 
    module: { 
     rules: [{ 
      test: /\.ts(x?)$/, 
      exclude: /node_modules/, 
      use: [ 
       { 
        loader: 'babel-loader', 
        options: { 
         'presets': [ 
          ['env', { 
           'modules': false 
          }] 
         ] 
        } 
       }, 
       { 
        loader: 'ts-loader' 
       } 
      ] 
     }] 
    }, 
    plugins: [ 
     new WebpackNotifierPlugin({ alwaysNotify: true }), 
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'commons', 
      filename: 'commons-bundle.js', 
      minchunks: 2 
     }), 
     new BundleAnalyzerPlugin() 
    ], 
    resolve: { 
     extensions: ['.js', '.ts', '.tsx'] 
    }, 
    devtool: 'none' 
}]; 

を私の知る限り見ることができるように2回以上使用されているチャンク（3つあります）を見つけて、commons-bundle.jsに移動する必要がありますが、を実行するとと出力ファイルを見ると、pikaday、moment、fancyboxはすべて移動するのではなく、各ファイルに含まれていることが分かります。commons-bundle.js

助けてくれれば幸いです。

Answer 1

整数値の代わりに関数としてminChunksオプションを使用したいと思うかもしれません。あなたは、一瞬、およびpickadayは、したがって、以下のような変更minChunksが動作するはずです、node_modulesから来ているfancybox -

それを修正しています

new webpack.optimize.CommonsChunkPlugin({ 
      name: 'commons', 
      filename: 'commons-bundle.js', 
      chunks: [global, todo, budget, promotions, planner], //optional, however I find this as good practice 
      minChunks: function (module) { 
       return module.context && module.context.indexOf("node_modules") !== -1; 
      } 
     }),