如何将一个供应商块文件 (webpack) 用于多个 React 项目

Question

如何将一个供应商块文件 (webpack) 用于多个 React 项目

Mar*_*tin 4 git bundle reactjs webpack commonschunkplugin

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

项目设置：

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

Run Code Online (Sandbox Code Playgroud)

每个都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'
      })
  ]
}

Run Code Online (Sandbox Code Playgroud)

问题：

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ign*_*cio 6

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

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

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

归档时间：	8 年，3 月前
查看次数：	1907 次
最近记录：	8 年，3 月前