我如何在 webpack 配置中获取 lang html 属性

Question

    const lang = "the lang html attribute value";

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

    var configuration = Object.keys(languages).map(function(language) {
        const loadedLang = (lang.indexOf("fr") > -1) ? "fr" : "en";
        return {
            name: loadedLang,
            entry: './assets/js/main.js',
            output: {
                filename: 'bundle.js',
                path: path.resolve(__dirname, 'assets/js/dist')
            },
            plugins: [
                new I18nPlugin(
                    languages[loadedLang]
                )
            ]
        }
    });

所以我正在尝试获取 <html lang="en-US"> lang 属性并且我知道我无法从 webpack 配置文件访问 DOM。

我的问题是：

有人知道如何执行此操作或如何从 webpack 访问本地存储吗？

PS: 我尝试了一个 node-localstorage 包，但它没有完成我想要的工作

Answer 1

您问题的答案是使用 fs api 加载文件，然后使用正则表达式提取您的语言：

const fs = require('fs');
const content = fs.readFileSync('PATH_TO_INDEX.HTML', options: { encoding: 'utf8' });
const lang = content.match(/<html lang="(.*)"/)[1];

但我建议使用 "webpack" 方式：

为每种语言创建一个单独的文件夹，其中包含 index.html 和每种语言特定的 js 文件。

为此，添加以下内容：

output: {
 path: path.resolve(__dirname, `assets/js/dist/${language}/`)
},
plugins: [
 new HtmlWebpackPlugin({
   template: 'PATH_TO_YOUR_TEMPLATE',
   lang: language,
   title: 'your page title',
 })
]

请不要忘记安装 html-webpack-plugin 并在您的配置顶部要求它。

并创建一个包含以下内容的新文件index.html：

<!DOCTYPE html>
<html lang="<%= htmlWebpackPlugin.options.lang %>">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

现在，对于每种语言，都会在每个语言文件夹中创建一个单独的 index.html，其中包含正确的语言和该语言的正确 js 文件。

所以不是 html 文件决定了语言集，而是 webpack 配置。

我如何在 webpack 配置中获取 lang html 属性

how can i get the lang html attribute in webpack configuration

javascript

internationalization

local-storage

lang

webpack