使用 webpack 打包外部文件供多个模块使用答案

【问题标题】：Bundling external files to be used by multiple modules using webpack使用 webpack 打包外部文件供多个模块使用
【发布时间】：2017-05-11 09:40:18
【问题描述】：

我正在构建将安装在项目中的模块。它们具有相似的依赖关系，这会导致使用 webpack 在 bundle 中多次打包依赖关系。所以我将依赖项设为外部。

例如：

external: {
    'react':'react',
    'react-dom':'react-dom'
}

但是现在我正在努力寻找一种方法将依赖项捆绑到一个可以与模块一起使用的通用 js 文件中。

【问题讨论】：

标签： javascript npm webpack

【解决方案1】：

在你的 webpack 中使用这种格式进行外部配置：

// Exclude React from the bundle, must be react and react-dom here otherwise will not be excluded
externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react',
    umd: 'react',
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom',
    umd: 'react-dom',
  },
},

您可以在主（顶级）应用程序中包含和使用所有外部库。

不确定这是否是您的情况。多了解一些可能会很好。

【讨论】：

我可以使用我提到的配置来制作外部模块。但问题是我想将所有外部文件捆绑到一个文件中，我该怎么做？就像将 react 和 react-dom 作为捆绑在一起的另一个文件一样包含在内，因此在渲染前端时可以将其读取为外部