Webpack+Babel转译JS后Unicode字符无法正常渲染问题咨询

首先，我注意到你代码里有一个非常明显的拼写错误，这大概率是导致问题的核心原因：

在src/index.js中，你写的导入路径是：

import CCTest from "./ccctest";

但你的类文件明明是src/cctest.js——这里多了一个c！路径错误会导致Webpack无法正确导入你的CCTest类，打包出来的代码自然会出现异常，比如输出乱码或者功能失效。先把这个路径修正为：

import CCTest from "./cctest";

如果修正路径后问题依然存在，那我们再排查Webpack和Babel的转译配置对Unicode字符的影响：

1. 确保Webpack使用UTF-8编码处理文件 #

Webpack默认应该使用UTF-8，但有时候配置偏差会导致字符编码问题。你可以在webpack.config.js里明确指定编码：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'cctest.js',
    path: path.resolve(__dirname, 'dist'),
    charset: 'utf-8' // 确保输出文件用UTF-8编码
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        encoding: 'utf-8' // 处理源文件时用UTF-8编码
      }
    ]
  }
};

2. 检查Babel配置是否修改了字符串转义 #

默认的@babel/preset-env不会改动字符串里的Unicode转义序列，但如果你额外配置了某些插件（比如babel-plugin-transform-es2015-string-literals），可能会影响字符转译。打开你的babel.config.json或.babelrc，确保没有这类会修改字符串的插件。

3. 验证打包后的代码 #

打开dist/cctest.js，搜索parse方法，看看返回的字符串是不是"\u0d85"。如果它被转成了实际的字符或者其他奇怪的转义形式，你可以在Webpack配置里强制保留原始字符串转义：

module.exports = {
  // ...其他配置
  module: {
    parser: {
      javascript: {
        stringLiterals: 'raw' // 保留原始字符串的转义序列
      }
    }
  }
};

先从修正路径错误开始排查，这个90%概率能解决你的问题，剩下的配置调整是针对极端情况的补充。

内容的提问来源于stack exchange，提问作者Romeo Sierra