使用webpack

Question

我一直在优化我们的JS并且陷入了一个主要部分。如果我使用CommonChunksPlugin并创建供应商包，则它不包含所有节点模块。然后我使用另一个带有children: true的CommonChunksPlugin并且它会变得更好，但是将所有内容移动到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条目。

[BP+SI-80h]