Webpack＆TypeScript CommonsChunkPlugin無法正常工作

我已經按照一些指南設置了CommonsChunkPlugin，但它似乎沒有工作。我也在這裏搜索並閱讀了其他文章，但沒有運氣。Webpack＆TypeScript 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

任何幫助將不勝感激。

來源

2017-04-07 descendent

您可能希望將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; 
      } 
     }),

來源

2017-04-08 08:08:21

這是修復它，非常感謝。 – descendent

謝謝，這對我有幫助。但是，這不會移動任何不在node_modules中的公共模塊。上面的函數的一個小修改支持這兩種情況：'return（module.context && module.context.indexOf（「node_modules」）！== -1）|| count> = 2;' – Paul

Webpack＆TypeScript CommonsChunkPlugin無法正常工作

回答

相關問題