webpackでモックアップが効率的に作れる？？

Wordpressサイトを作っているタヌキです。
人によって作り方は様々だと思うのですが、私の場合、まずはHTML・CSSで完璧に仕上げてから、Wordpressサイトの形にしていきます。

そのHTML・CSSのサイトを作るときに、とにかく手間がめんどくさい。headerとかfooterとか、ページごとに作らず、ひとまとめにしたい。

そう思っていたら、友人が**「webpackを使えばいいじゃん」**と教えてくれました。

何？ webpack??

気になって、こちらの書籍を購入。『速習webpack 速習シリーズ』
この本で学んだことを、Qiitaに書いていこうと思います。

webpackとは

webpackとは、

Java Scriptのモジュールバンドラー。
関数またはクラスごとに細かく分割したモジュール（ファイル）を一つにまとめてくれる。
しかも読み込みの順序も良い感じに解釈してまとめてくれる

・・・ものだそうです。
webpackによって、ファイルを細かく分割して作成し、まとめることもできるので、ファイルの見通しも良くなリマス。また、名前空間も分割できるので、名前の競合も防げます。

しかも、ローダー（リソースを読み込むためのライブラリ）を追加することで、HTMLやCSSや画像ファイルもバンドルすることができます。

webpackの使い方

準備（Node.jsとnpmのインストール）

webpackを使うには、まずNode.jsが必要です。

こちらのサイトからインストールできますし、macの場合、以下のコマンドでもNode.jsをインストールできます。

# homebrewをインストール
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# nodebrewをインストール
$ brew install nodebrew

# Node.jsをインストール
$ nodebrew install-binary stable

Node.jsがインストールできたことを確認するために、$ npm -vで、npmのパージョンが確認したら、プロジェクトのフォルダに行き、次のコマンドで設定ファイルを生成します。

$ cd プロジェクトのルート
$ npm init -y

npm init -yの-y オプションは、「全て規定の値でpackage.jsonを生成する」という意味です。

webpackをインストール

webpackのインストールにはnpmコマンドを利用します。

$ npm install --save-dev webpack webpack-cli

--save-devオプションは、「インストールするパッケージの情報をpackage.jsonに記録する」という意味です。
このコマンドによって、package-lock.jsonというファイルが生成されます。

ファイルを準備

ここまでで自動生成されたファイルに、いくつかファイルを追記します。ここまでのプロセスで自動生成されたファイルと、自分で追記したファイルを合わせた、フォルダ構造はこちらです

.
├── modules
│    ├ module-A.js ★
│    └ module-B.js ★
├── entry.js ★
├── index.html ★
├── output.js
├── node_modules
└── package.json

★は手動で生成したファイル、その他は自動生成のファイルです。この時、module-A.jsとmodule-B.jsの内容をentry.jsに統合し、output.jsを通じて、index.htmlに表示しようと思います。

この時、手動で生成した各ファイルに書いてある内容はこちらです。

module-A.js

console.log('moduleA がインポートされました');

module-B.js

console.log('moduleB もインポートされました');

entry.js

import * as moduleA from './modules/module-A';
import * as moduleB from './modules/module-B';

console.log('これは、エントリーポイントのあるファイルです');

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="output.js"></script>
  <title>Document</title>
</head>
<body>
  <p>hello! webpack!</p>
</body>
</html>

設定ファイルの書き方

webpack.config.jsをプロジェクト直下に自分で用意します。そして、以下の内容を記載します。

webpack.config.js

module.exports = {
  // 1.エントリーポイント
  entry: './entry.js',
  output: {
    //2.出力先のフォルダ
    path: `${__dirname}`,
    //3.出力先ファイル名
    filename: 'output.js'
  },
};

$ npx webpack

そうすると、output.jsが自動生成され、index.html（のコンソール）には以下の内容が出力されます。

module-A.jsとmodule-B.jsの内容がentry.jsにまとまり、output.jsを通じて、index.htmlに表示されました。

webpackはこのままではあまり活用の意味がわかりにくいですが、Jqueryをまとめたり、アイコンをまとめたり、CSSをまとめたりなど、活用のポイントがたくさんあるようです。
まだまだ勉強中ではありますが、便利な使い方がわかったら、随時発信していきたいと思います。