webpack的I18n和pug怎么配置呢?

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

阅读 2.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题