我使用file-loader
发出图像文件,html-loader
将html模板加载到js代码中。在我们的团队决定引入国际化之前,一切都很好。我检查了i18n-webpack-plugin
,这似乎是我需要的东西。
我成功配置了webpack,它分别在两个不同的路径dist/lang1
和dist/lang2
中构建了两个版本的静态文件。由于i18n-webpack-plugin
需要导出multiple configurations,因此file-loader
会将所有图像文件两次发送到这两个路径中。我稍微修改了配置文件并设法将图像文件发送到dist
。
到目前为止,dist
目录看起来完全符合我的要求:
dist/
|---lang1/
| |
| '-----app.hash1.js // references image files correctly
| |
| '-----index.html // loads app.hash1.js in <script> tag
|---lang2/
| |
| '-----app.hash2.js // references image files correctly
| |
| '-----index.html // loads app.hash2.js in <script> tag
|
|--- image1-hash.jpg
|
|--- image2-hash.jpg
|
·--- image3-hash.jpg
我对这个过程产生这个结果感到不满:
webpack runs for the `lang1` configuration
>>>>> loads files according to dependency, using corresponding loaders
>>>>>>>>>>>>> if it contains localization function ( __() by default ),
replaces it with lang1 translation
>>>>>>>>>>>>> if one file matches file-loader test, copys it into dist
---------------------------------------------------------------------
webpack runs for the `lang2` configuration
>>>>> loads files according to dependency, using corresponding loaders
>>>>>>>>>>>>> if it contains localization function ( __() by default ),
replaces it with lang2 translation
>>>>>>>>>>>>> if one file matches file-loader test, copys it into dist
许多工作(如编译较少,图像复制,js linting等)在这里完成了两次(n语言支持n次),构建性能很差。
有办法破解这个吗?