如何利用WebPack构建多语言站点并实现文本提取与翻译打包？

Webpack本身没有原生功能直接提取HTML/JS中的文本并生成多语言站点，但通过第三方插件组合，完全可以实现你要的需求——不用复制开发文件，一套源码同时构建英文（默认）和西班牙语版本的站点。

核心步骤拆解 #

1. 提取待翻译文本到外部文件 #

你需要先给代码中的可翻译文本做标记，再用插件扫描提取：

• 在JS中统一用标记函数包裹文本，比如：

  // JS中的标记示例
  const welcomeText = __('Welcome to our site');
  

• 在HTML模板中用自定义属性标记文本，比如：

  <!-- HTML中的标记示例 -->
  <h1 data-i18n="welcomeText"></h1>
  

• 使用i18next-parser或webpack-extract-translations这类插件，扫描源码中的标记文本，导出成JSON/PO等格式的翻译源文件（比如locales/en.json、locales/es.json），翻译人员只需修改这些外部文件即可。

2. 构建多语言目录结构 #

通过Webpack插件组合生成对应语言的站点目录：

• 用html-webpack-plugin创建多实例，为每种语言生成独立的HTML文件，并指定输出路径：

  // Webpack配置示例：生成多语言HTML
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    // ...其他基础配置
    plugins: [
      // 英文版本（默认），输出到根目录
      new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        chunks: ['main'],
        locale: 'en'
      }),
      // 西班牙语版本，输出到es-es目录
      new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'es-es/index.html',
        chunks: ['main'],
        locale: 'es'
      })
    ]
  };
  

• 配合i18next（纯JS国际化库），在页面加载时根据当前目录加载对应语言的翻译文件，自动替换页面中的标记文本。

3. 避免复制开发文件 #

全程只用一套源码文件，通过Webpack的灵活配置实现多语言编译：

• 可以把语言配置抽成单独的对象，循环生成对应的插件实例和输出配置，无需手动复制任何开发文件。
• 静态资源（图片等）通过配置Webpack的output.publicPath，让多语言页面共享同一套资源，避免重复复制。

总结 #

Webpack原生不提供多语言提取和构建的全流程功能，但借助成熟的国际化插件和Webpack的灵活配置，完全可以实现你的需求：一套源码，自动提取待翻译文本，同时构建出带目录区分的多语言站点。

内容的提问来源于stack exchange，提问作者Tom