如何使用 webpack 2 polyfill fetch 和 promise？答案

【问题标题】：How to polyfill fetch and promise with webpack 2?如何使用 webpack 2 polyfill fetch 和 promise？
【发布时间】：2017-06-11 03:09:36
【问题描述】：

如何为Webpack 2 填充fetch 和promise？

我有很多入口点，所以 Webpack 1-way 在每个入口点之前添加它们不是理想的解决方案。

【问题讨论】：

你为什么不把 polyfills 作为一个单独的条目包含进来呢？它们是 polyfill，因此没有模块会导入/需要它们。
您的意思是在捆绑之前将 polyfill 作为单个文件加载（我没有 SPA。1 页 = 1 捆绑。这就是为什么我有很多入口点）？如果是 - 这是一个 GET 请求 =/ 无论如何，很好的提示，谢谢。

标签： javascript webpack es6-promise webpack-2

【解决方案1】：

无论你有多少入口点，你都应该有一个单独的文件来存放你的供应商文件，例如框架（react、angular、whatevs）和任何你总是需要但很少会改变的库。您希望将它们作为单独的捆绑包，以便可以缓存它。该捆绑包应始终加载。如果您将它与 commonChunksPlugin 一起使用，您包含在该捆绑包中的任何内容都将始终可用，但不会在您的块中重复。

这是我完成的应用的示例（仅显示相关配置选项）：

module.exports = {
  entry: {
    client: 'client',
    vendor: [
      'react',
      'react-addons-shallow-compare',
      'react-addons-transition-group',
      'react-dom',
      'whatwg-fetch'
    ]
  },
  output: {
    path: `${__dirname}/dist`,
    filename: '[name].js',
    publicPath: '/build/'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    })
  ]
}

【讨论】：

感谢您的回答。赏金将很快到期，所以我把它给你，作为大多数投票的答案，但如果有人有其他方法，欢迎你;）
很公平。感谢您的赏金

【解决方案2】：

也许我没有正确理解，但你不能在 webpack 配置中的其他入口点之前添加 babel-polyfill 吗？

module.exports = {
   entry: ['babel-polyfill', './app/js', '/app/js/whatever']
};

【讨论】：

条目是对象：webpack.js.org/guides/code-splitting-libraries/… 所以我必须在键之间复制粘贴很多。我正在寻找一些东西，自动为每个入口点导入它们。
所以根据我的经验，您需要将 import 'babel-polyfill' 添加到应用程序启动中，通常是 index.js 文件.. 或者在 webpack 中手动将其添加到每个入口点。我强烈建议使用前者，因为大多数应用程序都有单点启动，您不必继续添加 polyfill。
仅供参考：babel-polyfill 不包括 fetch