HtmlWebpackInlineSourcePluginの試行錯誤

なぜ、インラインにするか・・・って？
Lambdaで動かすためですよ。
qiita.com

【1】Cloud9に環境を作る

【2】yarnを入れる
Cloud9にYarnをインストールする - Qiita
まず、yarnを入れます。

$ npm init -y
$ npm install -g yarn

gでグローバル指定でyarnを入れないとパスが入らないようで、続くyarnコマンドが実行できない。

"npm i -D yarn"ではダメみたい。

【3】webpackを入れる
yarn, webpack, babel, ビルドできる環境を作る - Qiita

$ yarn add webpack webpack-cli html-webpack-plugin --dev

devDependenciesは開発時にのみ必要なモジュール
dependenciesは実行時にも必要なモジュール

・・・とのことです。では、今回の方針（後述）であれば、--devで良いか。
【4】html-webpack-inline-source-pluginを入れる
Webpackでjsファイル、cssファイル、画像ファイルをインラインにする方法 - Qiita

$ yarn add -D html-webpack-inline-source-plugin

npmと同じで-Dって、きっと--devのことだよね。

さて、cloud9からlambdaを作成することができるので、きっとcloud9で生成したhtmlもlambdaに送れるものと思うのだが・・・やり方が分からず、今回はcloud9でhtmlを作成する「だけ」としたいと思います。統合するのは次の2ファイルです。

main.html

<!DOCTYPE html>
<html>
    Hello World!<br>
    <button id="btnOK" onclick="alert('OK!');">ok</button>
</html>

main.js

window.addEventListener('load', () => {
  alert('HTML!');
});

ちなみに、あくまでベースはjsです。htmlに埋め込むのだけど、htmlはテンプレートなだけ。
onclick=xxx()みたいな形でhtmlからjsの関数を呼ぼうとしても、呼べません。
onclickを仕込みたければ、jsにaddeventlistnerを仕込みましょう。
同様に、bootstrapを読み込むのは、jsです。
package.jsonのdependencyに書いて、npm installで読み込んでしまいましょう。

【5】webpack.config.jsを書こう！

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

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({ inject: true, inlineSource: '.(js|css)$', template: "./src/index.html" }),
        new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
    ],  
    entry: path.resolve("src", "index.js"),
    resolve: {
      extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    mode: 'development'
};

実行するときはmode指定が必要です。
Webpack 4を使ってみたらビルド時に[WARNING]が出たので - Qiita

yarn run webpack --mode development

よくわからないが、元々のhtmlとjsはsrcフォルダ内に置いておきましょう。そこがデフォルトらしいです。

【6】エラーの回避
バージョンによっては上手くいかないらしく、package.jsonを書き直して、mpm installやってみると良いらしい。
Webpackにてhtml-webpack-inline-source-pluginを利用する - Qiita

{
  "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"
    "amazon-chime-sdk-js": "*",
    "aws-sdk": "^2.675.0",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
  }
}

数日前の記事なので、とても参考になります！

・・・なるほど、分かってきたので、再度手順をまとめなおします！

サーバレス練習帳

着眼大局着手小局

HtmlWebpackInlineSourcePluginの試行錯誤