使用Webpack构建i18n多页站点的正确方法是什么？

Question

任务

使用相同的部分为几种语言构建几个静态页面。保持项目尽可能简单和最小。

堆栈

具有html-loader，HtmlWebpackPlugin和I18nPlugin的Webpack。没有什么花哨。一切都是今天的最新版本。

当前解决方案

webpack.config.js：

const entryHtmlPlugins = (language) => pageList
    .map(function (entryName) {
        const langPart = language === defaultLanguage ? '' : `${language}.`;

        return new HtmlWebpackPlugin({
            filename: `../dist/${langPart}${entryName}`,
            template: `prerender/${entryName}`,
            language,
        });
    });

module.exports = Object.keys(languages).map((language) => ({
    ...
    module: {
        rules: [{
            test: /\.(html)$/,
                include: path.join(__dirname, 'src/pages'),
                use: {
                     loader: 'html-loader',
                     options: {
                         interpolate: true
                     }
                }
         },
    ...]
    },
    plugins: [
        ...
        new I18nPlugin(languages[language]),
    ].concat(entryHtmlPlugins(language))
}))

index.html

<!-- regular html with translations in format: -->
<%= __('Test') %>

问题

在模板中，通过

导入

<%= require('html-loader!./partial.html') %>

或

${require('!html-loader!./partial.html')}

翻译无效。

解决方案？

使用temp文件夹中的插件对HTML页面进行处理（因此每个页面都构建一次以包含部分内容，并再次构建以进行翻译）正在运行，但会导致无限次重新呈现。而且感觉不对。
任务看起来很简单，我几乎相信没有其他方法可以使用模板引擎。 我想知道这是否是制作自定义插件的正确思路？ 如果当前堆栈对于我的目的而言过于谦虚，请提出其他任何选择。

问题

因此，有一种或多或少的方法可以同时使用partials和i18n，或者我 已经 使用pug（或其他东西）进行模板制作？

Answer 1

我实际上在Webpack: include html partial inside another partial?中找到了答案

您需要翻译的所有部分都是对它进行插值，而不是

<%= require('html-loader!./partial.html') %>

我们在做

<%= require('html-loader?interpolate./partial.html') %>

如果您将很多零件包含在零件的零件中，则这不是很漂亮，但它可以正常工作（至少目前如此），并且不需要任何其他模板引擎。