使用帶有packhash的webpack的條件加載polyfill

Question

我已按照此處的說明僅在舊的瀏覽器中有條件地加載polyfills文件，並且index.html中包含以下腳本：

<script>
  const modernBrowser = (
    'fetch' in window &&
    'assign' in Object
  );
  if (!modernBrowser) {
    const scriptElement = document.createElement('script');
    scriptElement.async = false;
    scriptElement.src = '/polyfills.js';
    document.head.appendChild(scriptElement);
  }
</script>

但是隨后在生產中，我們將文件移動到js文件夾，並在名稱中添加chunckhash以避免發現問題。 這就是webpack的輸出配置：

module.exports = {
  entry: {
    polyfills: './src/pollyfills.js',
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }
}

問題：這將生成一個polyfills文件，例如js/polyfills.620f3ed184b15f38c3f9.js /polyfills.js ，但是在腳本上我正在加載不存在的/polyfills.js 。 scriptElement.src后如何正確設置scriptElement.src的值以指向正確的文件？

Answer 1

您可以使用html-webpack-plugin來提供chunkhash文件。