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に表示しようと思います。
この時、手動で生成した各ファイルに書いてある内容はこちらです。
console.log('moduleA がインポートされました');
console.log('moduleB もインポートされました');
import * as moduleA from './modules/module-A';
import * as moduleB from './modules/module-B';
console.log('これは、エントリーポイントのあるファイルです');
<!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をプロジェクト直下に自分で用意します。そして、以下の内容を記載します。
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をまとめたりなど、活用のポイントがたくさんあるようです。
まだまだ勉強中ではありますが、便利な使い方がわかったら、随時発信していきたいと思います。