使用Webpack进行Intl polyfill的代码拆分

Question

我尝试为intl polyfill创建一个包，只为需要它的浏览器加载它。

使用以下代码，它会在我的输出文件夹

中创建捆绑包

if (!window.Intl) {
  require.ensure(['intl/dist/Intl'], (require) => {
    window.Intl = require('intl/dist/Intl');
  }, 'intl-bundle');
}

我注意到的第一件事是文件的大小很大，它包含所有语言，有没有办法定义我想要的语言？

另一个问题是，当浏览器尝试下载文件时，它会从我的应用程序的根文件夹中尝试。因此，它不会下载http://mydomain/js/1.intl-bundle.js，而是尝试获取http://mydomain/1.intl-bundle.js

有没有办法设置文件的下载位置？

我的webpack.config.js输出如下所示：

output: {
  path: './js/',
  filename: '[name].js'
},

最后一个问题是，我可以删除文件名称开头的1.，只是为了intl-bundle.js吗？

由于

Answer 1

我实际上要回答一些我自己的问题，因为我在几个小时的研究后找到了一些解决方案。

对于第二个问题，我没有在我的构建中定义publicPath，这就是浏览器从我的域的根目录下载文件的原因。更多信息：https://github.com/webpack/docs/wiki/configuration#outputpublicpath

output: {
  path: './js/',
  publicPath: './js/'
}

对于最后一个问题，您可以使用以下内容命名您的块：

output: {
  chunkFilename: '[id]-[name]-[chunkhash].js'
}

这允许您决定块的名称。

我仍然没有任何答案来减少intl文件的大小。