如何将一个供应商块文件（webpack）用于多个反应项目

Question

我有不同的 gits 和不同的反应应用程序。每个应用程序都应该使用相同的供应商块文件和外部包（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 特别是当前的 library/project，而不是供全球使用，是否有一个选项让 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>

Answer 1

可以使用DllPlugin。您将需要一个额外的 Webpack 配置文件，假设 webpack.vendor.config.js 具有常见的依赖项，例如：'react', 'react-dom', 'react-redux', 'redux', 'redux-thunk'。该捆绑包将与其他项目完全分离。

一旦你有了这个工作，它会创建一个可以从你的不同项目中使用的 manifest.json，所以不需要使用 webpack.optimize.CommonsChunkPlugin 插件，而是 DllReferencePlugin .

使用这种方法，您不同项目的包文件会更小，这意味着构建和重建时间更短。

如何将一个供应商块文件（webpack）用于多个反应项目

How to use one vendor chunk file (webpack) for multiple react projects

git

bundle

reactjs

webpack

commonschunkplugin

项目设置：

问题：

示例：