Question

简短版

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

如何添加babel-polyfill或类似内容，使其在执行清单之前运行

长版

我正在尝试将CommonsChunkPlugin添加到我的webpack配置中，以便将第三方（npm包）脚本拆分为单独的包。根据Webpack 2文档，我已经设置了＆＃34; combined implicit common vendor chunks and manifest file＆＃34;这在现代浏览器中运行良好。

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

我的两个显式入口点的背景知识：

legacy_libs - 使用script-loader放入全局命名空间的旧库。我希望随着时间的推移逐步解决这些问题

main - 我的主要应用入口点

另外两个（供应商和清单）是隐式的，并使用CommonsChunkPlugin创建。

当我使用IE11运行时，出现错误： Promise is undefined 。这似乎是因为webpack清单本身正在调用new Promise()。

在我的主要切入点，我有import 'babel-polyfill';。在我添加供应商之前明显的分块，这让我克服了IE的缺乏承诺。但是现在我已经首先加载了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; } }) }

Answer 1

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

所以要等到bug修正版发布或恢复到2.5.1！

Answer 2

我遇到了同样的问题。我的配置类似于您的（供应商和清单）。我解决它的方法是在清单的入口点添加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'
    }),
]

IEpack中的Webpack隐式供应商/清单块 - Promise未定义

2 个答案: