前言

目前国际化我的项目个别都须要开发者一一去实现，耗时耗力。webpack-i18n-plugin次要解决了两个痛点问题：

  • 提取我的项目中的国际化资源文件

    在webpack中配置插件(webpack-i18n-plugin)，即可提取出中文资源

  • 增加国际化代码

    增加loader，批改编译代码，主动增加国际化办法$i18n，对源码无污染

该国际化插件可用于vue，react我的项目，具体应用办法如下：

装置

npm install webpack-i18n-plugin -D

react我的项目中webpack配置

// webpack.config.jsconst i18nPlugin = require("webpack-i18n-plugin");// 配置loaderrules: [{    test: /\.(j|t)sx?$/,    loader: "webpack-i18n-plugin/loader",    exclude: /node_modules/,}],// 配置pluginsplugins: [    ...    new i18nPlugin(i18nConfig),    ...]

vue我的项目中webpack配置

// vue.config.jsconst i18nPlugin = require("webpack-i18n-plugin");chainWebpack: (config) => {    // 配置loader    config.module.rule("i18n").test(/\.(t|j)sx?$/)    .use("i18n-loader").loader("webpack-i18n-plugin/loader");    // 配置plugins    config.plugin("i18n").use(i18nPlugin).tap((options) => {        return [...options, i18nConfig];    });}

插件配置项i18nConfig

const i18nConfig = {    //国际化配置输入目录（可选）    i18nDir: path.resolve(__dirname, "./i18n"),    translation: {        // 配置en_US 语言包        en_US: {            source: [path.resolve(__dirname, "./翻译文件.xlsx")]        },        ...    }};