Webpackにてhtml-webpack-inline-source-pluginを利用する

更新（2021年6月13日）

本記事で紹介したPluginは既に開発が止まっておりますが、以下Pluginでは今でも開発が続いているようです。
開発環境上問題がなければこちらの活用をお勧めします

html-inline-script-webpack-plugin

以下当時の記事

古いPluginの内容となる為、最新のWebpack5等の環境では正常に動作しません

はじめに

webpackで出力する際に出力されたJavascriptをHTMLファイルに差し込みたいと思います。

が、html-webpack-inline-source-pluginを使えば良いという点までは辿り着いたものの、公式のやり方では素直に実現出来なかったので発生した問題とその解決方法を記載致します。

検証した環境

- Node.js 13.13.0
    - webpack 4.42.1
    - webpack-cli 3.3.11
    - ts-loader 6.2.2
    - html-webpack-plugin 4.2.0
    - html-webpack-inline-source-plugin 1.0.0-beta.2

今回発生した問題

公開されている通常のhtml-webpack-inline-source-pluginを利用するとバンドル時に以下のようなエラーが発生してしまいます。

Cannot read property 'tapAsync' of undefined

調べた所対象PluginのIssuesに答えがありましたが、現行のバージョンで発生しているバグのようです。 これを回避する方法を記載します。
https://github.com/DustinJackson/html-webpack-inline-source-plugin/issues/63

解決方法

• html-webpack-inline-source-pluginのバージョンを1.0.0-beta.2で指定する
• webpack.config.jsの記載方法を公式の書き方から変える。

以下に手順を示していきます。

Node.jsの開発環境を準備しましたらpackage.jsonを以下の通りにします。

package.json

{
  "name": "name",
  "dependencies": {
    "html-webpack-inline-source-plugin": "1.0.0-beta.2",
    "html-webpack-plugin": "4.2.0",
    "ts-loader": "6.2.2",
    "typescript": "3.8.3",
    "webpack": "4.42.1",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.10.3"
  }
}

インストールする

npm install

webpack.config.jsを以下の通り準備する

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");

const mode = process.env.NODE_ENV === "development" ? "development" : "production";
const entry = path.resolve("src", "index.ts");
const outPath = path.resolve("build");
const outFileName = "main.js";
const rules = [{ test: /\.tsx?$/, use: "ts-loader" }];
const resolve = { extensions: [".ts", ".tsx", ".js", ".json"] };
const output = { path: outPath, filename: outFileName };
const devServer = { contentBase: outPath };

const plugins = [
new HtmlWebpackPlugin({ inject: true, inlineSource: '.(js|css)$', template: "./src/index.html" }),
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
]

module.exports = [{
  mode,
  entry,
  output,
  module: { rules },
  resolve,
  externals,
  devServer,
  plugins,
}]

ここでポイントは以下の箇所になります。他の所はお好みで記載して良いです。寧ろ私のwebpack.config.jsのこの書き方はかなり我流なのであまり真似しない方が良いかもしれません。

webpack.config.json

const plugins = [
  new HtmlWebpackPlugin({ inject: true, inlineSource: '.(js|css)$', template: "./src/index.html" }),
  new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
]
```

通常公式では以下の通り記載することになっていますが、

```webpack.config.json
new HtmlWebpackInlineSourcePlugin()
```

これを以下の通りに変更するとErrorが解消されます。 ※なお今回Installしたプラグインのバージョンで上記公式の記載方法を取ると引数が足りないとErrorになります。

```
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)
```

上記の状態でバンドルしてみてください。上手くインラインされて出力されると思います。

以上