背景
在项目中，存在大量的中文字符定义，不论是枚举或是注释，抑或是报错信息，在工程build过后，中文信息都是存储在源码中的，第一感觉不专业，第二容易被人随便一搜就能定位到该业务逻辑源码，第三在某种条件下（根据操作系统差异），文件中的中文字符经常会乱码。遂有了念头将中文字符以unicode的形式存储到编译后的源码中。
loader实现(已废弃)
代码不多，直接上代码
import { loader } from "webpack";
export default function (this: loader.LoaderContext, content: string) {
console.log(`正在编译文件： [${this.resourcePath}]`);
return gbk2Unicode(content);
}
function gbk2Unicode(content: string) {
return content.replace(/([\u0080-\uffff])/g, (str) => {
let hex = str.charCodeAt(0).toString(16);
for(let i = hex.length; i < 4; i ++) {
hex = '0' + hex;
}
return '\\u' + hex;
})
}
// console.log(gbk2Unicode('``测试汉字@123123，。//，/qwea啊腊八sadasqwe111'))
plugin 实现
import { Compiler } from "webpack";
export default class UnicodeWebpackPlugin {
public apply(compiler: Compiler) {
compiler.plugin('emit', function (compilation, callback) {
console.log(`\n****unicode-webpack-plugin****`);
compilation.chunks.map(chunk => {
chunk.files.map(filename => {
console.log('正在编译资源：', filename);
compilation.assets[filename]._value = gbk2Unicode(compilation.assets[filename]._value);
})
})
console.log(`\n****unicode-webpack-plugin end****\n`);
callback();
})
}
}
function gbk2Unicode(content: string) {
return content.replace(/([\u0080-\uffff])/g, (str) => {
let hex = str.charCodeAt(0).toString(16);
for (let i = hex.length; i < 4; i++) {
hex = '0' + hex;
}
return '\\u' + hex;
})
}
在webpack中使用
在配置文件中添加以下内容
{
plugins: [ ...someplugin, new UnicodeWebpackPlugin() ]
}
