Webpack＆TypeScript CommonsChunkPlugin无法正常工作

Question

我已经按照一些指南设置了CommonsChunkPlugin，但它似乎没有工作。我也在这里搜索并阅读了其他文章，但没有运气。

我有三个文件（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' 
}]; 

至于我可以看到应该找到任何使用两次或更多（有三个）的块并将其移动到commons-bundle.js，但是当我运行webpack，并看看输出文件，我可以看到pikaday，时刻和fancybox都被包含在每个文件中，而不是被移动到commons-bundle.js

任何帮助将不胜感激。

Answer 1

您可能希望将minChunks选项用作函数而不是整数值。你fancybox，时刻和pickaday来自node_modules，因此修改像下面minChunk应该工作 -

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; 
      } 
     }),