IE11 中的 Webpack 隐式 vendor/manifest 块 - Promise 未定义
Webpack implicit vendor/manifest chunks in IE11 - Promise is undefined
短版
当我在 IE11 中 运行 我的应用程序时,我在 manifest.js 文件中收到一个错误提示 Promise is undefined
。
如何添加 babel-polyfill
或类似内容,使其 运行 在 执行清单之前 ?
长版
我正在尝试将 CommonsChunkPlugin 添加到我的 webpack 配置中,以便将第三方(npm 包)脚本拆分成一个单独的包。根据 Webpack 2 文档,我设置了“combined implicit common vendor chunks and manifest file”,它在现代浏览器中运行良好。
我编写了一个函数来确保块以正确的顺序包含到我的索引文件中(见下文)。
我的两个显式入口点的一些背景知识:
- 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;
}
})
}
我运行遇到了同样的问题。我的配置与您的相似(供应商和清单)。我解决它的方法是在清单的入口点添加 babel-polyfill
。您的 entry
应如下所示:
entry: {
legacy_libs: './app/libs.js',
main: './app/main.js',
manifest: 'babel-polyfill'
}
这将加载 polyfill,以便它可以在清单文件中使用。
编辑: 使用它在构建时返回了另一个错误(尽管它在开发服务器上运行良好):
ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (manifest)
通过修改入口点和 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'
}),
]
这似乎是 webpack 2.6.0 引入的问题,已经发布了一个错误:https://github.com/webpack/webpack/issues/4916
所以要么等到错误修复发布,要么恢复到 2.5.1!
短版
当我在 IE11 中 运行 我的应用程序时,我在 manifest.js 文件中收到一个错误提示 Promise is undefined
。
如何添加 babel-polyfill
或类似内容,使其 运行 在 执行清单之前 ?
长版
我正在尝试将 CommonsChunkPlugin 添加到我的 webpack 配置中,以便将第三方(npm 包)脚本拆分成一个单独的包。根据 Webpack 2 文档,我设置了“combined implicit common vendor chunks and manifest file”,它在现代浏览器中运行良好。
我编写了一个函数来确保块以正确的顺序包含到我的索引文件中(见下文)。
我的两个显式入口点的一些背景知识:
- 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;
}
})
}
我运行遇到了同样的问题。我的配置与您的相似(供应商和清单)。我解决它的方法是在清单的入口点添加 babel-polyfill
。您的 entry
应如下所示:
entry: {
legacy_libs: './app/libs.js',
main: './app/main.js',
manifest: 'babel-polyfill'
}
这将加载 polyfill,以便它可以在清单文件中使用。
编辑: 使用它在构建时返回了另一个错误(尽管它在开发服务器上运行良好):
ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (manifest)
通过修改入口点和 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'
}),
]
这似乎是 webpack 2.6.0 引入的问题,已经发布了一个错误:https://github.com/webpack/webpack/issues/4916
所以要么等到错误修复发布,要么恢复到 2.5.1!