Webpack打包产物出现无效字符问题求助：压缩版本字符乱码

嘿，这个问题我之前也碰到过！这是典型的字符编码不匹配导致的乱码问题，我给你拆解下成因和靠谱的解决办法：

你看到的…，其实是UTF-8编码的省略号…（Unicode U+2026）被错误当成ISO-8859-1（Latin-1）解码后的结果。
在开发环境下，Webpack没有开启压缩，文件保持UTF-8编码且浏览器能正确识别；但压缩打包后，大概率是下面两种情况导致的：

• 压缩工具（比如Webpack默认的Terser）处理时没有正确保留UTF-8编码
• 项目里的HTML模板或文件加载器没有明确声明UTF-8编码，导致压缩后文件编码被篡改

试试下面这些方案，按顺序排查应该能解决：

1. 给压缩工具强制指定UTF-8编码 #

如果用的是Webpack5默认的TerserPlugin，在Webpack配置里添加charset: 'utf8'选项，确保压缩输出时保留UTF-8编码：

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          output: {
            charset: 'utf8', // 强制输出UTF-8编码
          },
        },
      }),
    ],
  },
};

2. 确保HTML文件声明UTF-8编码 #

首先检查你的HTML模板文件开头有没有正确的meta标签：

<meta charset="UTF-8">

如果用html-webpack-plugin生成HTML，可以在配置里强制注入编码声明，避免被压缩工具篡改：

new HtmlWebpackPlugin({
  template: './src/index.html',
  meta: {
    charset: 'UTF-8'
  }
})

3. 检查文件加载器的编码设置 #

如果你的HTML片段是通过raw-loader或file-loader加载的，要确保加载时指定UTF-8编码：
比如raw-loader的配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'raw-loader',
            options: {
              encoding: 'utf-8'
            }
          }
        ]
      }
    ]
  }
};

4. 用HTML实体替代特殊字符 #

如果上面的方法都没效果，可以直接把代码里的…替换成HTML实体…，这样不管编码怎么处理，浏览器都能正确解析：

<li class="disabled"><a role="button" href="#" tabindex="-1" style="pointer-events: none;"><span aria-label="More">&hellip;</span></a></li>

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