フロントエンドをガッツリやるようになると避けられないのがwebpack
ということで、webpack
でレイアウト20ページ程度の静的サイトをつくる場合の方法をメモしておきます。
環境
-
macOS Catalina 10.15.2
-
node.js v10.16.0
-
npm 6.13.4
最初に
プロジェクトルートで
|
|
webpackのインストール
|
|
--save-dev
オプションは、インストールするパッケージの情報をpackage.json
に記録するという意味です。
オプション
-
--save-dev
アプリ開発で利用するツールをインストールする場合に利用する -
--save
アプリそのものを実行する場合にインストールする
webpackのインストール
をインストールしたらpackage.json
にこのように記録されます。
|
|
htmlのレイアウトをpugで作成する
webpack
でもheader
やfooter
などを共通化して書き出すこともできるらしいのですが、どうも上手いやり方がわからなかったので、あきらめてpug
で組み立てて、公開するpublic
フォルダに書き出す方法にしました。
というわけで、ここでは一旦webpack
のことを忘れて、必要となるpug
とpug-cli
をインストールします。
|
|
次にプロジェクト直下に公開するpublic
フォルダとhtml
のlayoutを格納するsrc
フォルダを作成します。
|
|
pug
ファイルを格納するlayout
フォルダをsrc
直下に作成します。
|
|
ここまで、出来たらあとはpug
でゴリゴリ書いていけばいいのですが、pug
のIncludes
を使えばヘッダーやフッターなどを部品化できるので、僕の場合は、_common
フォルダの中に共通部品を入れ込んでいます。フォルダ構成はこんな感じ。
|
|
次に基盤となる_baseof.pug
を作成します。
|
|
ここまで、できたら後は共通の部分のpug
を作って、各ページを作るだけ。user画面を作成するとこんな感じ。まずbaseof.pug
ファイルを読み込んで、それから組み立ていく流れ、静的サイトのディレクトリのpath
変数を設定してあげると便利。
|
|
レイアウトをpug
で作成したらこれをpublic
フォルダに書き出すために、スクリプトを作成します。
場所はどこでもいいですが、とりあえずプロジェクト直下にsample.sh
を作成します。
|
|
sample.sh
にpug
をbuildするスクリプトを書きます。
|
|
さて、ここまできたら試しにスクリプトを実行してみましょう。
|
|
きちんとbuildされればpublic
フォルダにhtmlが書き出されていると思います。ここまでで、htmlは終わりです。
webpack-dev-server
webpack-dev-server
を使えばファイルを更新すると即座に反映してくれるので、インストールしておきましょう。
|
|
webpack-dev-server
を有効にするためにwebpack.config.js
を作成します。
|
|
webpack-dev-server
とエントリーポイントなどを含めてた基本の形はこんな感じ。
|
|
webpack-dev-server
を簡単に起動できるようにpackage.json
にnpm scripts
編集します。
ついでにbuildコマンド
も追加しておきます。
|
|
webpck エントリーポイントを作成する
エントリーポイントとなるindex.js
をsrc
フォルダ直下に作成する。
|
|
エントリーポイント
とはバンドルをするときの開始するファイルのことです。
|
|
ここまで、終わればwebpack-dev-server
を起動してみましょう。
まずは、buildして、main.js
を出力します。
|
|
webpack-dev-server
を起動させる。
|
|
問題なく画面が表示されたらdeveloperツールでconsoleを確認してみましょう。
ここはエントリーポイントと表示されているはずです。
scssをバンドルする
スタイルシートをバンドルするための、css-loader
,style-loader
,sass-loader
,とscss
をコンパイルするのに必要になるnode-sass
をインストールします。
|
|
インストールが終わったら、webpack.config.js
のmodule-rulesパラメーター
にローダーを適用するtestファイルと適用するuseローダーを指定します。
ローダーは右から適用されます。ちょっと改行してるので、この場合は下から適用されます。まず、sass-loader
がnode-sass
を使ってsass
をcssにコンパイルして、css-loader
がそれをバンドルし、最後にjsファイルにcssを入れるのにstyle-loader
が適用されるとう流れです。
|
|
試しに、style.scss
を以下のようにして。
|
|
このstyle.scss
をエントリーポイントのindex.js
にモジュールとしてimportします。
|
|
|
|
body
が赤になっていれば成功です。scss
を更新したらすぐさまに色が変わると思います。
Normalize.cssをインストール
|
|
normalize.css
をインポート
|
|
normalize.css
はnpmが公式から公開されていますので、そのままインスールします。
buildするとmain.js
の中にnormalize.css
が追加されているのが確認できると思います。
|
|
開発時と本番時を分ける
本番時はソースコードを圧縮したり、余計なconsole.log
を削除してbuildしたいかと思います。その時に利用するのがwebpack-merge
です。
プロジェクト直下に以下のファイルを作成しましょう。
|
|
-
共通設定: webpack.base.js
-
開発用設定: webpack.development.js
-
本番用設定: webpack.production.js
webpack-merge
をインストールする。
|
|
まず、最初に共通の設定から行います。
|
|
次にwebpack.development.js
の設定です。開発中ですのでsourcemapなどを確認できたほうがいいので、基本はこんな感じ。
|
|
本番は圧縮の設定はwebpack
のmode
をproduction
にするだけ勝手によしなしにやってくれます。細かい設定が必要ならその都度、プラグインなどで設定します。以下は、console.logを出力しないようにterser-webpack-plugin
を使っています。
|
|
package.jsonの開発用と本番用設定
webpack-merge
を使って開発用と本番用設定を分割したので、今度はこの設定をpackage.json
に指定します。
|
|
これでnpm start
の時は開発用の設定で起動し、npm run build
の時は本番設定でbuildします。
終わり。