はじめに
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
constplugins=[newHtmlWebpackPlugin({inject:true,inlineSource:'.(js|css)$',template:"./src/index.html"}),newHtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),]通常公式では以下の通り記載することになっていますが、
webpack.config.json
newHtmlWebpackInlineSourcePlugin()これを以下の通りに変更するとErrorが解消されます。 ※なお今回Installしたプラグインのバージョンで上記公式の記載方法を取ると引数が足りないとErrorになります。
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)
上記の状態でバンドルしてみてください。上手くインラインされて出力されると思います。
以上
