4

我有不同的 git 和不同的反应应用程序。每个应用程序都应该使用相同的供应商块文件和外部包（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'
      })
  ]
}

问题：

Webpackvendor.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>
4

1 回答 1

6

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

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

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

于 2017-08-12T07:23:29.870 回答