webpack的I18n和pug怎么配置呢?

发布于 2022-09-11 20:07:26 字数 1611 浏览 26 评论 0

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const I18nPlugin = require("i18n-webpack-plugin");
const pug = {
  test: /\.pug$/,
  use: ['html-loader?attrs=false', 'pug-html-loader']
};
const languages = {
  en: require("./lang/en.json"),
  zh: require("./lang/zh.json")
};
const config = Object.keys(languages).map(function(language){
  return {
    name: language,
    entry: './src/app.js',
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: language + '.bundle.js'
    },
    devServer: {

    },
    module: {
      rules: [pug]
    },
    plugins: [
      new webpack.BannerPlugin("asddas"),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/pug/index.pug',
        inject: false
      }),
      new I18nPlugin(languages[language])
    ]
  }
});
module.exports = config;

入口文件app.js:

console.log(__("title"))//这里的console.log可以成功被浏览器打印

编译后HTML:

<!DOCTYPE html>
<html>
<head>
  <title>I'm a title</title>
</head>
<body><h1>__("title")</h1>
<script src="en.bundle.js"></script>
//这里是手动加的,html里__("title")无法读取语言包里的内容
</html>

可以成功将pug打包生成html文件,但是语言包怎么加载呢?用script引入zh.bundle.js但是没有效果,在编译后的html内怎么读取文本呢?

求大大解惑,非常感谢

全部文件在百度云链接里

链接:https://pan.baidu.com/s/1q_lf...
提取码:nq16

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文