Question

我已按照说明here有条件地在旧浏览器中加载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脚本中不存在。如何在webpacking之后正确设置scriptElement.src的值以指向正确的文件？

Answer 1

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

使用webpack和chunkhash的条件加载polyfill

1 个答案: