モックアップを効率的に作りたい：webpackを導入してみた①

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

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

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

何？ webpack??

気になって、こちらの書籍を購入。『[速習webpack 速習シリーズ]("https://www.amazon.co.jp/dp/B07CQLGGP9/ref=cm_sw_em_r_mt_dp_U_zD0.DbRG74MMF")』
この本で学んだことを、Qiitaに書いていこうと思います。

## webpackとは

webpackとは、

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

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

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

## webpackの使い方
### 準備（Node.jsとnpmのインストール）
webpackを使うには、まずNode.jsが必要です。

[こちらのサイト]("https://nodejs.org/ja/")からインストールできますし、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`に表示しようと思います。

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

```js:module-A.js
console.log('moduleA がインポートされました');
```

```js:module-B.js
console.log('moduleB もインポートされました');
```
```js:entry.js
import * as moduleA from './modules/module-A';
import * as moduleB from './modules/module-B';

console.log('これは、エントリーポイントのあるファイルです');
```
```html: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`をプロジェクト直下に自分で用意します。そして、以下の内容を記載します。

```JavaScript:webpack.config.js
module.exports = {
  // 1.エントリーポイント
  entry: './entry.js',
  output: {
    //2.出力先のフォルダ
    path: `${__dirname}`,
    //3.出力先ファイル名
    filename: 'output.js'
  },
};
```
```
$ npx webpack
```
そうすると、`output.js`が自動生成され、`index.html`（のコンソール）には以下の内容が出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393888/626fa49a-036b-17ad-9818-e5eed9fbcdb5.png)

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

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