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