使用webpack将节点模块移动到应用程序供应商块

Question

我一直在优化我们的JS并陷入一个主要部分。如果我使用CommonChunksPlugin并创建供应商捆绑软件，它不包括所有节点模块。然后我使用另一个CommonChunksPlugin与children: true，它会更好一些，但将所有内容都移动到app.js而不是vendor.js。我希望供应商可以更容易缓存和更大，并且应用程序要更小，因为它会更频繁地更改。 如何从应用程序获取节点模块到供应商包？您可以在下面看到我的分析仪输出和配置。

而对于插件我的WebPack配置为：

plugins: [ 
    new webpack.ProvidePlugin({ 
     _: "underscore" 
    }), 
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: (module, count) => { 
     var context = module.context; 
     return count > 1 && context && context.indexOf("node_modules") !== -1 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     children: true, 
     minChunks: 2 
     // minChunks: (module, count) => { 
     // var context = module.context; 
     // return count > 1 && context && context.indexOf("node_modules") !== -1 
     // } 
    }), 
    new webpack.DefinePlugin({ 
     "process.env": { 
     NODE_ENV: JSON.stringify(process.env.NODE_ENV), 
     API_ROOT_URL: JSON.stringify(settings.api_root_url), 
     APP_ROOT_URL: JSON.stringify(settings.app_root_url), 
     PUSHER_KEY: JSON.stringify(settings.pusher_key), 
     } 
    }) 
] 

Answer 1

我有我的配置一个CommonsChunkPlugin条目。

 new webpack.optimize.CommonsChunkPlugin({ 
      name: "common-bundle", 
      filename: "common-bundle.js", 
      minChunks: function (module) { 
       return module.context && module.context.indexOf("node_modules") !== -1; 
      } 
     }),