如何在Webpack配置中获取HTML的lang属性值？

要替换硬编码的lang值为HTML真实的lang属性，核心思路是在Webpack配置运行时读取并解析HTML文件，提取lang属性值，再将其应用到多语言打包逻辑中。下面是具体实现步骤：

步骤1：读取并解析HTML文件 #

Webpack配置运行在Node.js环境中，我们可以用Node的fs模块读取HTML文件，再通过DOM解析工具或正则提取lang属性。

选项A：使用cheerio（推荐，鲁棒性高） #

cheerio是轻量的DOM解析库，能像jQuery一样操作HTML内容：

1. 先安装依赖：

npm install cheerio --save-dev

2. 在Webpack配置中引入并解析：

const fs = require('fs');
const cheerio = require('cheerio');
const path = require('path');
const I18nPlugin = require('i18n-webpack-plugin'); // 确保你引入了正确的i18n插件

// 读取你的HTML文件（替换为实际文件路径）
const htmlFilePath = path.resolve(__dirname, 'index.html');
const htmlContent = fs.readFileSync(htmlFilePath, 'utf8');

// 解析HTML并提取lang属性，默认值设为'en'以防未配置
const $ = cheerio.load(htmlContent);
const lang = $('html').attr('lang') || 'en';

选项B：使用正则表达式（无需额外依赖，适合简单场景） #

如果你的HTML结构简单（lang属性在<html>标签中且用双引号包裹），可以用正则直接匹配：

const fs = require('fs');
const path = require('path');

const htmlFilePath = path.resolve(__dirname, 'index.html');
const htmlContent = fs.readFileSync(htmlFilePath, 'utf8');

// 匹配html标签中的lang属性
const langMatch = htmlContent.match(/<html[^>]+lang="([^"]+)"/i);
// 提取匹配结果，默认值为'en'
const lang = langMatch ? langMatch[1] : 'en';

步骤2：修改多语言打包配置 #

将硬编码的判断逻辑替换为动态获取的lang值，同时注意避免不同语言的打包产物互相覆盖：

var languages = { 
  "fr": require("./languages/fr.json"), 
  "en": require("./languages/en.json") 
}; 

var configuration = Object.keys(languages).map(function(language) {
  // 校验lang是否在我们的语言列表中，避免无效值
  const loadedLang = languages.hasOwnProperty(lang) ? lang : 'en';
  
  return { 
    name: loadedLang,
    entry: './assets/js/main.js',
    output: { 
      filename: 'bundle.js',
      // 按语言分目录，防止不同语言的bundle覆盖
      path: path.resolve(__dirname, `assets/js/dist/${loadedLang}`)
    },
    plugins: [ 
      new I18nPlugin(languages[loadedLang]) 
    ] 
  } 
});

关键注意事项 #

• 文件路径正确性：确保HTML文件的路径是正确的，推荐用path.resolve生成绝对路径，避免相对路径的坑。
• 默认值处理：一定要设置默认lang（比如'en'），防止HTML未配置lang属性时打包出错。
• 产物目录隔离：原来的配置会把所有语言的bundle.js放到同一个目录，会被覆盖，建议按语言分目录存储。

内容的提问来源于stack exchange，提问作者Aziz.G