以前このブログをnisshiee.org下に移設したときの記事に書いたとおり、本サイトはwebpackを使って生成している。この手法は、良くも悪くもビルドステップを自由にカスタマイズできるという特徴がある。自分で好きなようにできるというメリットでもあるが、そこらのブログサービスならだいたいやってくれそうなことも自分でやらないといけないというデメリットでもある。いうビルドステップでやりたいけど放置してたことの1つに「外部サイトへのリンクに自動でtarget="_blank"をつける」というものがある。これまでは全ての外部リンクに1個ずつ手で書いていた(ちなみに1個typoしていた)。いつか自動にしたいなーと思っていたら、ちょうどtwitterとVeinにこんな記事が流れてきた。Blog)これはちょっと前の記事だが、nisshiee.orgもこの対応をしなきゃいけないんだった、と思い出し、自動化と合わせてやることにした。既存のビルドステップは以下のようにwebpackとhtml-webpack-pluginを使ってHTMLを生成している。].concat(htmlPlugins),}html-webpack-pluginには処理の間にhookを挟む機構がある。詳細は本家を見てもらいたいが、html-webpack-pluginがHTML文字列を生成したあとに処理を差し込んで、HTMLの書き換えが可能だ。pluginとして実装する。詳細この記事は以下のバージョンを前提にしている。3.2.0ここから書いたコードなどを載せていくが、pluginの書き方はwebpackやhtml-webpack-pluginのバージョンによってかなり変わっているようなので注意。html-webpack-pluginのREADME.mdは2019-02-04時点のmasterブランチが3.2.0からだいぶ変わっている模様。noreferrer"を付与している。注意点として、webpack.config.jsに渡すplugins配列は、自前pluginがhtml-webpack-pluginより後ろにある必要がある。結果というわけでこれでうまく動いた。@nisshieeorgと書くだけで自動で属性がつくようになった。nisshiee.orgTOPaboutblog。