【问题标题】：What is the proper way to i18n multipage site, build with webpack?使用 webpack 构建 i18n 多页站点的正确方法是什么？
【发布时间】：2019-07-25 13:25:33
【问题描述】：

任务

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

堆栈

带有 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')}

翻译不工作。

解决方案？

使用临时文件夹中的插件处理 HTML 页面（因此每个页面都构建一次以包含部分内容，并再次构建用于翻译）正在工作，但会导致无限重新渲染。而且感觉不对。
任务看起来如此简单，我几乎不相信除了使用模板引擎之外别无他法。我想知道这是否是制作自定义插件的正确思路？如果当前的堆栈对于我的目的来说太谦虚了，请您提出任何其他选择。

问题

那么是否有一种或多或少优雅的方式来同时使用 partials 和 i18n，或者我有使用 pug（或其他东西）进行模板？

【问题讨论】：

标签： html webpack internationalization html-webpack-plugin multi-page-application

【解决方案1】：

其实我已经在Webpack: include html partial inside another partial?找到答案了

所有你需要翻译你包含的部分就是插入它，所以而不是

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

我们在做

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

如果您在部件的部件中包含很多部件和部件，这不是那么漂亮，但它可以工作（至少现在）并且不需要任何额外的模板引擎。

【讨论】：