webpackのsourcemapで日本語が文字化ける時の対処法

はじめに

TypeScriptをwebpackでtranspileしてるんですけどsourcemapの日本語が化けてちょっと不便だったので調査しました。2015/12/29時点ではこのバグ（？）はwebpackのmasterブランチで修正されているので、正式リリース後は解決される見込みです。正式リリースまで、それ以前の方（v1.12.9時点ではアウト）の参考になればと思います。（あるいは別の簡単な方法を知ってる人は教えて下さい）

対処法

sourcemapURLを自力で置換したりとかいろいろと方法はあるかと思いますが、考えるの面倒ですし、修正方法もこのPRに書いてあるので、ソースをいじっちゃいます。

いじるのはwebpackの2ファイルです。charset=utf-8を追加すればOK。

lib/EvalSourceMapDevToolModuleTemplatePlugin.js

        }
        sourceMap.sourceRoot = "";
        sourceMap.file = module.id + ".js";
-       var footer = self.sourceMapComment.replace(/\[url\]/g, "data:application/json;base64," + new Buffer(JSON.stringify(sourceMap)).toString("base64"));
+       var footer = self.sourceMapComment.replace(/\[url\]/g, "data:application/json;charset=utf-8;base64," + new Buffer(JSON.stringify(sourceMap)).toString("base64"));
        source.__EvalSourceMapDevToolData = new RawSource("eval(" + JSON.stringify(content + footer) + ");");
        return source.__EvalSourceMapDevToolData;
    });

lib/SourceMapDevToolPlugin.js

                            return JSON.stringify(sourceMap);
                        })
                        .replace(/\[url\]/g, function() {
-                           return "data:application/json;base64," +
+                           return "data:application/json;charset=utf-8;base64," +
                                new Buffer(JSON.stringify(sourceMap)).toString("base64");
                        })
                    );

これでとりあえずは文字化けしなくなります。筆者はほぼ一人で使ってるので良いんですけど大規模チームとかで使ってる人には向かない方法でしょうね。。。ただ、正式リリースは近いはず！（たぶん）