静的サイト用の Webpack4 boilerplate を作った
静的サイト用の Webpack4 boilerplate を作った:
この記事は、 UUUM Advent Calendar 2018 23日目の記事です。
Webpack4のboilerplateで、VueとかReact使えないとかSPA要件無しでピンポイントに合ったものがみつからなかった。
VueとかReactとかSPAとかちょっとしたことを一切したくない（できない）場合、
ちょっと古い作りでやる必要があるときなどにwebpack設定を使い回したかった。
src/templatesにあるejs(A)に対して、同名のjsファイルがsrc/jsにある場合(B)に、
そのejsに対してコンパイルしたjsを自動的にinjectしたhtmlを生成して、distディレクトリの直下に出力します(C)。
こんなejs
があって、こんな同名のindex.jsがある場合
こんなhtmlがdist直下に出力されます。
(jsとcssはそれぞれコンパイルされて別々に出力される)
Gulpでよくない？
zeitのnowがめちゃくちゃ早くておすすめ！
登録してcliツールまでインストールされたら
で速攻でデプロイできます！
ちょっとした静的サイトとか、LPに毛が生えたやつとかを作るとき
できたら記事を上げます！
はじめに
この記事は、 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
その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>
src/js/index.js
import "../scss/index.scss"; const test = "aa"; console.log(test);
(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>
公開方法
zeitのnowがめちゃくちゃ早くておすすめ！登録してcliツールまでインストールされたら
yarn build now dist
いつ使える？
ちょっとした静的サイトとか、LPに毛が生えたやつとかを作るとき
課題
- scssをいちいちjsからインポートするのがダルい
- 新規ファイル追加したときにHMRが動かない
- いちいちjsファイルとejsファイルを作成するのがダルい
- 共通なscssとか、jsとかをいちいちインポートするのがダルい
- ２階層以上のurlに対応してない
- ejsの中の別ejsをincludeするときのpath解決
- ejsの中の画像パス指定にrequireしないといけない
できたら記事を上げます！
コメント
コメントを投稿