如何使用一个供应商块文件(webpack)进行多个反应项目

时间:2017-08-11 09:13:27

标签: git reactjs webpack bundle commonschunkplugin

我有不同的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,而不是为了全局使用,是否有一个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>

0 个答案:

没有答案