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

【问题标题】：Code Splitting with Webpack for Intl polyfill使用 Webpack 进行 Intl polyfill 的代码拆分
【发布时间】：2016-03-04 15:39:10
【问题描述】：

我正在尝试为 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吗？

谢谢

【问题讨论】：

【解决方案1】：

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

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

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

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

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

这使您可以决定块的名称。

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

【讨论】：