使用ts-loader加载ts文件时，导致文件内unicode编码的汉字转成中文

发表于 更新于 分类于 阅读次数： Changyan： 本文字数： 997 阅读时长 ≈ 1 分钟

这个问题其实是个比较难遇到的问题，主要是因为我们特殊的的环境背景：我们的前端静态资源服务器的默认文件编码为GBK，我们的页面和开发环境下默认编码是utf-8，这就导致了，我们开发好的前端资源打包到服务器的时候，文件编码会自动转为GBK，因此，文件内的中文都会变成乱码。

在之前的webpack环境中，我有配置过uglifyjs进行自动转换unicode的操作，配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    //...
    plugins: [
        new UglifyJsPlugin({
            uglifyOptions: {
                output: {
                    ascii_only: true
                }
            }
        })
    ]
};

配置中，uglifyjs是作为webpack的一个plugins来使用的。
这样配置，在之前的bebal以及es3环境下均没有什么问题，但近几天我在webpack中集成ts编译环境的时候，这么写却完全没有作用，为了解决这个问题，真真的查了很多很多资料啊（话说这部分的文档还真是粗糙，查资料都完全没有头绪）。

不过还好，最终还是有解决方案的：我仔仔细细的看了几遍uglifyjs官方文档，发现官方推荐的写法是这样的：

1
2
3
4
5
6
7
8
9
10
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin()
    ]
  }
}

把环境中uglifyjs的使用方式修改之后，build一下，完美生效啦~

2018-08-27 15:39:38补充：
此问题是因为webpack版本升级成4.x.x造成的问题，怪自己疏漏寡闻吧。

最后感叹一下，前端发展的实在是太快了，我们这些老程序员写着写着代码，最后都快变新人了，很是杯具。。。
webpack这一整套的生态，真的内容太多了，前路漫漫，信心难立呀~~~

本文永久链接: https://www.mulianju.com/ts-loader-unicode/