Git 如何为多个项目使用一个供应商区块文件（网页包）_Git_Reactjs_Webpack_Bundle_Commonschunkplugin

Git 如何为多个项目使用一个供应商区块文件（网页包）

git reactjs webpack

Git 如何为多个项目使用一个供应商区块文件（网页包）,git,reactjs,webpack,bundle,commonschunkplugin,Git,Reactjs,Webpack,Bundle,Commonschunkplugin,我有不同的Git和不同的react应用程序。每个应用程序都应该使用相同的供应商区块文件和外部包（React、ReactDOM…）项目设置：每个webpack.config.js都包含此配置，但库名不同： module.exports = { entry: { app: './src/App.ts', vendor: ['react', 'react-dom', 'react-redux', 'redux', 'redux-thunk'] }, output

我有不同的Git和不同的react应用程序。每个应用程序都应该使用相同的供应商区块文件和外部包（React、ReactDOM…）

项目设置：每个

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配置文件，比如说

Webpack.vendor.config.js

，它具有常见的依赖项，例如：

'react'、'react dom'、'react redux'、'redux'、'redux thunk'

。这个捆绑包将与其他项目完全解耦

一旦你有了这个功能，它将创建一个

manifest.json

，可以从你的不同项目中使用，因此不需要使用

webpack.optimize.commonChunkPlugin

插件，而是使用

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

存在管理dll块的问题。如何在供应商模块的版本（包括polyfills来自的babel runtime）、webpack版本和babel的verison上保持每个项目的同步？这样，在webpack.vendor.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'
      })
  ]
}

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