如何在多个React项目中使用一个供应商块文件(Webpack)

Question

如何在多个React项目中使用一个供应商块文件(Webpack)

gitreactjswebpackbundlecommonschunkplugin

4

我有很多不同的Git仓库，每个仓库都有一个React应用程序。每个应用程序都应该使用相同的vendors块文件，并包含外部包（例如React、ReactDOM等）。

项目设置：

Project 1 (git)
   /dist/...
   /src/...
   webpack.config.js
Project 2 (git)
   /dist/...
   /src/...
   webpack.config.js
Project N (git)
   ...

每个 webpack.config.js 文件都包含这个配置，但是库的名称不同：

module.exports = {
  entry: {
      app: './src/App.ts',
      vendor: ['react', 'react-dom', 'react-redux', 'redux', 'redux-thunk']
  },
  output: {
      path: path.resolve(__dirname, "dist"),
      filename: '<Name>.bundle.js',
      library: "<Name>",
      libraryTarget: "umd"
  },
  module: { /* ... */ },
  plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          filename: 'vendor.bundle.js'
      })
  ]
}

问题:

Webpack为当前库/项目构建了一个vendor.bundle.js，而不是为全局使用构建，是否有选项可以让webpack创建一个vendor.bundle.js，该文件可包含在单个页面中，从而基于此文件加载两个应用程序：

示例:

<html>
   <head>
      <script src="/vendor.bundle.js"></script>
   </head>
   <body>
      <script src="/app1.bundle.js"></script>
      <script src="/app2.bundle.js"></script>
   </body>
</html>

- Martin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ignacio · Accepted Answer

您可以使用DllPlugin。您需要一个额外的Webpack配置文件，比如说webpack.vendor.config.js，其中包含常用的依赖项，例如：'react'， 'react-dom'， 'react-redux'， 'redux'， 'redux-thunk'。这个捆绑包将完全与其他项目解耦。

一旦您实现了这个功能，它将创建一个manifest.json，可用于您的不同项目，因此无需使用webpack.optimize.CommonsChunkPlugin插件，而是使用DllReferencePlugin。

通过这种方法，您的不同项目的捆绑文件将更小，这意味着构建和重构时间更短。