はじめに
この記事は、 UUUM Advent Calendar 2018 23日目の記事です。
TL;DR
- HTMLとJSとCSSをまとめずに、個別に出力するWebpack4の設定を書いたよ
- ES6, SCSSのコンパイルと、生成HTMLにjs/cssのinline injectはやってくれるよ！
- ファイルから勝手に生成するから、webpackに追記は必要無し！
- テンプレートエンジンはejsだよ
- とはいえディレクトリ構造はわりと自由なので、共通ファイルの置き場所とか好きにしてね
- 完成品はこちら
動機
Webpack4のboilerplateで、VueとかReact使えないとかSPA要件無しでピンポイントに合ったものがみつからなかった。
VueとかReactとかSPAとかちょっとしたことを一切したくない（できない）場合、
ちょっと古い作りでやる必要があるときなどにwebpack設定を使い回したかった。
ディレクトリ構造
├── README.md
├── dist - 出力先
│ ├── css
│ │ ├── index.css
│ │ └── page1.css
│ ├── js
│ │ ├── index.js
│ │ └── page1.js
│ ├── index.html --- C
│ └── page1.html
├── package.json
├── src
│ ├── partial --- templateから読み込みたいejsファイルを置くところ
│ │ └── partial.ejs
│ ├── js --- templatesの方とファイル名を合わせる必要がある、ない場合はjsが入らないだけだからなくてもよい
│ │ ├── index.js --- B
│ │ └── page1.js
│ ├── scss --- ファイル名はなんでもいいよ、jsでインポートするかhtmlで読み込むかして使ってね
│ │ ├── a.scss
│ │ └── b.scss
│ └── templates --- ここの構造がそのまま配信するときの生成htmlになります
│ ├── index.ejs --- A
│ └── page1.ejs
├── webpack.config.js
└── yarn.lock
src/templatesにあるejs(A)に対して、同名のjsファイルがsrc/jsにある場合(B)に、
そのejsに対してコンパイルしたjsを自動的にinjectしたhtmlを生成して、distディレクトリの直下に出力します(C)。
こんなejs
src/templates/index.ejs
<!DOCTYPE html>
<html>
<head>
<title>hi</title>
</head>
<body>
test
<% include ./src/partial/partial %>
<img src="<%- require("../images/example.jpg") %>" class="hidden_image">
</body>
</html>
があって、こんな同名のindex.jsがある場合
src/js/index.js
import "../scss/index.scss";
const test = "aa";
console.log(test);
こんなhtmlがdist直下に出力されます。
(jsとcssはそれぞれコンパイルされて別々に出力される)
dist/index.html
<!DOCTYPE html>
<html>
<head>
<title>hi</title>
<link href="css/index.css" rel="stylesheet"></head>
<body>
test
<p>ejs templating </p>
<img class="text" src="images/example.jpg" alt="">
<script type="text/javascript" src="js/index.js"></script></body>
</html>
Gulpでよくない？
公開方法
zeitのnowがめちゃくちゃ早くておすすめ！
登録してcliツールまでインストールされたら
yarn build
now dist
で速攻でデプロイできます！
いつ使える？
ちょっとした静的サイトとか、LPに毛が生えたやつとかを作るとき
課題
- scssをいちいちjsからインポートするのがダルい
- 新規ファイル追加したときにHMRが動かない
- いちいちjsファイルとejsファイルを作成するのがダルい
- 共通なscssとか、jsとかをいちいちインポートするのがダルい
- ２階層以上のurlに対応してない
- ejsの中の別ejsをincludeするときのpath解決
- ejsの中の画像パス指定にrequireしないといけない
ここらへんを解決したver２を現在誠意作成中です。
できたら記事を上げます！