Question

我有一个webpack配置，我有2个入口点（a.js和b.js），并希望将我的共享代码拆分为另外两个文件：common和vendor。

a.js和b.js应该很小 - 只有模块本身，而不是任何共享代码。我希望在应用程序运行时（common.js）和供应商运行时（vendor.js）之间拆分“运行时”

当我加载a.html时，我可以加载vendor.js，common.js和a.js脚本

module.exports = {
  context: __dirname,
  devtool: 'inline-source-map',
  entry: {
    a: './src/a.js',
    b: './src/b.js',
    vendor: [
      'react',
      'react-dom',
      'react-router'
    ]
  },
  output: {
    path: path.join(__dirname, './build'),
    filename: '[name].js'
  },
  plugins: [
    new CommonsChunkPlugin({
    name: "vendor",
    minChunks: Infinity,
    })
  ]
}

这会创建供应商块，但我还想在a.js和b.js之间创建一个公共应用程序块。

如何使用webpack创建公共应用程序块？

Answer 1

几个月前我遇到了这个问题，最终找到了解决方案。这是我的webpack配置，假设有两个入口点app.en.js和app.es.js具有一些特定于语言环境的代码，然后导入我们的应用程序，其中包含我们的React组件，Redux reducer等。

entry: {
  'app.en': './frontend/src/app.en.js',
  'app.es': './frontend/src/app.es.js',
},

/**
 * The order matters here a lot!
 */
plugins: [
  /**
   * The `common` chunk will catch code shared between `app.en.js` and `app.es.js`, 
   * e.g. the React components used in your app.
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
  }),

  /**
   * Catches all your vendor files, assuming they're in `node_modules`. You can 
   * change the logic to include other vendor folders as well, as shown 
   * below (we have one simply called 'vendor').
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module) {
      // this assumes your vendor imports exist in the node_modules directory
      return module.context && (module.context.indexOf('node_modules') !== -1)
    }
  }),
],

另请注意，我不包含实际应用（在我们的例子中为application.js）。

值得注意的是，我没有指定供应商＆＃39;通常在示例中显示的入口点。这完全不适合我。

使用多个入口点，通用和供应商以及块来设置webpack

1 个答案: