的WebPack隐含厂商/在IE11清单块 - 无极是不确定的

Question

短版

当我运行我在IE11应用程序，我得到一个错误，从manifest.js文件中说Promise is undefined。

如何添加babel-polyfill或类似的文件，使其在之前运行清单被执行？

龙版

我想CommonsChunkPlugin以第三方（NPM包）脚本拆分为独立的bundle添加到我的WebPack配置。根据Webpack 2文档，我设置了“combined implicit common vendor chunks and manifest file”，这在现代浏览器中运行良好。

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

背景对我的两个明确的入口点位：

• legacy_libs - 被放入全局命名空间与script-loader旧库。我希望随着时间的推移
• 主逐步走出这些 - 我主要的应用程序入口点

另外两个（供应商和清单）是隐式的，并与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引入了一个问题，一个bug已经发出：https://github.com/webpack/webpack/issues/4916

因此，要么等到bugfix发布或恢复到2.5.1！

Answer 2

我碰到了同样的问题。我的配置与您的配置类似（供应商&清单）。我解决这个问题的方法是在清单的入口处添加babel-polyfill。你entry应该是这样的：

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

这将加载填充工具，因此它可以在清单文件中使用。

编辑：使用这个建筑时返回另一个错误（尽管它运行的DEV-服务器上精）：

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' 
    }), 
]