6

简洁版本

当我在 IE11 中运行我的应用程序时，我Promise is undefined在 manifest.js 文件中收到一条错误消息。

我如何添加babel-polyfill或类似的东西，使其在清单执行之前运行？

长版

我正在尝试将 CommonsChunkPlugin 添加到我的 webpack 配置中，以便将第三方（npm 包）脚本拆分为单独的包。根据 Webpack 2 文档，我设置了“组合隐式通用供应商块和清单文件”，这在现代浏览器中运行良好。

我编写了一个函数来确保这些块以正确的顺序包含在我的索引文件中（见下文）。

关于我的两个显式入口点的一些背景知识：

  • legacy_libs - 放置在全局命名空间中的旧库，带有script-loader. 我希望随着时间的推移逐步淘汰这些
  • main - 我的主要应用程序入口点

其他两个（供应商和清单）是隐式的，由 CommonsChunkPlugin 创建。

当我用 IE11 运行它时，我得到一个错误：Promise is undefined. 这似乎是因为 webpack 清单本身正在调用new Promise().

在我的主要入口点，我有import 'babel-polyfill';. 在我添加供应商和清单分块之前，这让我能够克服 IE 缺乏 Promise 的问题。但是现在我首先加载了 manifest.js，我不知道如何以正确的顺序包含它。

我的配置如下所示：

module.exports = {
  entry: {
    legacy_libs: './app/libs.js',
    main: './app/main.js'
  },
  ...
  plugins: [
    // Extract third party libraries into a separate vendor bundle.
    // Also extract webpack manifest into its own bundle (to prevent vendor hash changing when app source changes)
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),

    // Generate index.html file.
    // Include script bundles in the right order based on chunk name prefixes.
    new HtmlWebpackPlugin({
      template: 'app/index.ejs',
      chunksSortMode: function (a, b) {
        const chunkOrder = ['manifest', 'vendor', 'legacy_libs', 'main'];
        const aChunk = chunkOrder.findIndex(chunk => a.names[0].startsWith(chunk));
        const bChunk = chunkOrder.findIndex(chunk => b.names[0].startsWith(chunk));
        const aValue = (aChunk > -1) ? aChunk : chunkOrder.length;
        const bValue = (bChunk > -1) ? bChunk : chunkOrder.length;
        return aValue - bValue;
      }
    })
}
4

2 回答 2

2

这似乎是 webpack 2.6.0 引入的一个问题，已经发布了一个错误：https ://github.com/webpack/webpack/issues/4916

所以要么等到错误修复发布，要么恢复到 2.5.1！

于 2017-05-24T18:21:36.233 回答
0

我遇到了同样的问题。我的配置与您的相似（供应商和清单）。我解决它的方法是添加babel-polyfill清单的入口点。你entry应该是这样的：

entry: {
    legacy_libs: './app/libs.js',
    main: './app/main.js',
    manifest: 'babel-polyfill'
}

这将加载 polyfill，以便在清单文件中使用它。

编辑：使用它在构建时返回另一个错误（尽管它在开发服务器上运行良好）：

CommonsChunkPlugin 中的错误：在正常模式下运行时，不允许使用非入口块（清单）

通过修改入口点和 CommonsChunkPlugin 来修复它，它看起来像这样：

entry: {
    legacy_libs: './app/libs.js',
    main: './app/main.js',
    'babel-polyfill': 'babel-polyfill'
},
...
plugins: [
    ...
    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: 'babel-polyfill'
    }),
]
于 2017-05-24T15:47:52.020 回答