react、vue国际化插件webpack-i18n-plugin react、vue国际化插件webpack-i18

前言
目前国际化项目一般都需要开发者逐个去实现，耗时耗力。webpack-i18n-plugin主要解决了两个痛点问题：

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

在webpack中配置插件(webpack-i18n-plugin)，即可提取出中文资源
添加国际化代码

添加loader，修改编译代码，自动添加国际化方法$i18n，对源码无污染

【react、vue国际化插件webpack-i18n-plugin】该国际化插件可用于vue，react项目，具体使用方法如下：
安装

npm install webpack-i18n-plugin -D

react项目中webpack配置

// webpack.config.jsconst i18nPlugin = require("webpack-i18n-plugin"); // 配置loader rules: [{ test: /\.(j|t)sx?$/, loader: "webpack-i18n-plugin/loader", exclude: /node_modules/, }],// 配置plugins plugins: [ ... 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")] }, ... } };