試行錯誤過程で調べたは、こちらに記載しました。
serverless.hateblo.jp
以下、Windowsで実行しましたが、【3】で断念しました。
webpack自体は動くのですが、HtmlWebpackInlineSourcePluginは動きません。
ということで、同じ手順をcloud9/amazonlinuxで実行します。
【さらに追記】
やっぱり、Windowsでも動きました。。。ファイル名を間違えていただけだった・・・・
【1】環境準備
まずは、package.jsonを作りましょう。
{
"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",
"popper.js": "^1.15.0"
}
}
popperって何か分かりませんが、jquery同様にbootstrapを動かすためのものみたいです。
注意点ですが、2020年5月時点では、html-webpack-inline-source-pluginが、かなりイケてないようですね。
こちらの記事では "1.0.0-beta.2"を指定。
Webpackにてhtml-webpack-inline-source-pluginを利用する - Qiita
AWSのサンプルスクリプトでは、"^0.0.10"を指定。
amazon-chime-sdk-js/package.json at master · aws/amazon-chime-sdk-js · GitHub
うーむ（笑）
なにはともあれ、package.jsonを作ったら、npm installです。
あと、yarnをグローバルに入れましょうか。
yarnなら、ローカルに入れたwebpackなどのモジュールにパスを入れなくてもアクセスできます。
$ npm install $ npm install -g yarn
【2】srcの準備
エントリーとなるindex.jsと、テンプレートとなるindex.htmlを用意しましょう。
ちなみに、あくまでベースはjsです。htmlに埋め込むのだけど、htmlはテンプレートなだけ。
onclick=xxx()みたいな形でhtmlからjsの関数を呼ぼうとしても、呼べません。
onclickを仕込みたければ、jsにaddeventlistnerを仕込みましょう。
同様に、bootstrapを読み込むのは、jsです。
ですので、前手順でpackage.jsonのdependencyに書いて、npm installで一緒に読み込んでおきました。
あと、出力先のdistフォルダも作っておきましょう。
【3】webpackの実行
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',
filename: path.join(__dirname, 'dist')+'/main.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'
};次のコマンドラインでwebpackを実行します。
yarn run webpack --mode development
webpack.config.jsの中でdevelopmentモードを指定していたのであれば、
コマンドラインでもdevelopmentモードを指定します。
【4】lambda/node.jsに載せる
まずは、node.jsでindex.js(index.handler)の作成から。
これで、WEBサーバーができるのだから、凄いよね。
server.js
const fs = require('fs');
exports.run = async (event) => {
// TODO implement
return response(200, 'text/html', fs.readFileSync('./main.html', {encoding: 'utf8'}));
};
function response(statusCode, contentType, body) {
return {
statusCode: statusCode,
headers: { 'Content-Type': contentType },
body: body,
isBase64Encoded: false
};
}||<
そして、ここまできて気付く事実。
htmlから参照しているbootstrapを読み込んでいない・・・。
HtmlWebpackInlineSourcePluginのchunkという機能を使わないと、htmlのインラインはチャンクしてくれないらしい。
[https://teratail.com/questions/238214:title]
ただ、chunksを入れて実行しても、チャンクしてくれているようには見えないな・・・。
ですが、さらに調べていると、驚愕の発見が・・・"<span style="color: #ff0000">it's no longer supported (もはやそれはサポートされていない)</span>"とのこと。もしかして、HtmlWebpackInlineSourcePluginマズイのか？
>||
We had been using HtmlWebpackInlineSourcePlugin without issue but it's no longer supported so we moved to InlineChunkHtmlPlugin which works great for JS, but refuses to capture the output style.css file and inline it, leaving us with no styles.javascript - Inline CSS with Webpack, without HtmlWebpackInlineSourcePlugin? - Stack Overflow
え、そうなの？
確かに、1.0ベータ版とか0.1版とかじゃないと動かないのって、困るよな。
ちなみに、上記2つの例に出てくるMiniCssExtractPluginとは、CSSを別ファイルに分けるためのものだそうです。今回の目的には合わなそうですので、インストールしません。
webpackでmini-css-extract-pluginを使う | アールエフェクト
では、次の2つを使ってみるか・・・ということで、また方向転換。
InlineChunkHtmlPlugin
react-dev-utils - npm
(※名前の似ている”html-webpack-inline-chunk-plugin”とは別物っぽい。)
HTMLInlineCSSWebpackPlugin
html-inline-css-webpack-plugin - npm
いずれも本日時点で日本語情報は無し。（笑）
npm i -D react-dev-utils npm i -D html-inline-css-webpack-plugin ||> これでも読み込めなかった・・・ダメだ。 さらに、方針変更だな。 bootstrap関連のjs/cssはS3をフル公開して、そこに置きます。
