如何使用i18n-webpack-plugin和其他加载器?

时间:2018-03-02 14:07:56

标签: webpack internationalization

我使用file-loader发出图像文件,html-loader将html模板加载到js代码中。在我们的团队决定引入国际化之前,一切都很好。我检查了i18n-webpack-plugin,这似乎是我需要的东西。

我成功配置了webpack,它分别在两个不同的路径dist/lang1dist/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次),构建性能很差。

有办法破解这个吗?

0 个答案:

没有答案