Webpack初心者向け（Webpack用のconfigをしないで、jQueryでappend()するだけのjsをwebpackで作る）

## 概要
Webpackをゆるく使ってみます。

* Webpackのconfigファイルを作らないで、jQueryでappend()するだけのjsをコンパイル（ビルド？）します。
* 最終的に、jsの更新を検知してブラウザが自動でリロードされるようになるところまでやります。  
※ただし、Webpackのconfigファイルを作る。

## 環境

```
> node --version
v11.6.0

> npm --version
6.5.0

> npm list webpack
webpack@4.29.0

> npm list webpack-dev-server
webpack-dev-server@3.1.14

> npm list -g browser-sync
browser-sync@2.26.3
```

## 準備

### package.jsonの用意

package.jsonの中の `scripts`,`dependencies`,`devDependencies`を下記の通りにします。

```json-doc
  /* ～中略～ */

  "scripts": {
    "dev": "webpack --mode=development --progress"
  },

  /* ～中略～ */

  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }

  /* ～中略～ */
```

### package.jsonに設定したパッケージをインストールする

npm installします。
※`package.json`の`dependencies`と`devDependencies`に記載したパッケージがインストールされます。

```
npm install
```

### Webpackのコンパイルの対象になるindex.jsを書く

`package.json`があるパスで`src`ディレクトリを作成し、その配下に`index.js`を作成します。
jsの中身は↓、

```javascript
window.$ = window.jQuery = require('jquery')
$('#hoge').append('<p>hogehoge</p>')
```

### HTML用意

`package.json`があるパスで`dist`ディレクトリを作成し、その配下に`test.html`を作成します。
HTMLの中身は↓。

```html
<html>
<body>
    <div id="hoge"></div>
    <script src="./main.js"></script>
</body>
</html>
```

※Webpackでコンパイル後のjsはデフォルトだと、`dist`の下に出力されるので`dist`配下にhtmlを作る

### こういう状態になる

ここまでやると↓になっているはず。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/299475/45f7d991-8526-1d00-9a15-4cb2efd25b9e.png)

## コンパイルする

### コンパイルを実行するためのコマンドを`package.json`に書く

`package.json`内の`scripts`を下記の状態に書き換えます。

```json-doc
/* ～中略～ */
"scripts": {
  "dev": "webpack --mode=development --progress",
  "dev-srv": "webpack-dev-server --mode=development --progress"
},
/* ～中略～ */
```
※ローカル[^1]に`npm install`した`webpack`を実行するため、`package.json`内に`scripts`を書いて`npm`を使って`webpack`を実行します。
[^1]: グローバルに入れる場合は`npm install -g`になる

### コンパイル実行

```
npm run dev
```

`./dist`の中に`main.js`が出来ているはず。
これはWebpackのデフォルトだと、entry pointが`./src/index.js`で、outputが`./dist/main.js`になっているから。

* [entry pointのデフォルト値の公式](https://webpack.js.org/concepts/#entry)
* [outputのデフォルト値の公式](https://webpack.js.org/concepts/#output)


### コンパイルしたjsの動作確認

ブラウザで`test.html`を開くと`jQuery`で挿入した、pタグのhogehogeが出力されます。

## js更新時に自動的にコンパイルする

ファイルを修正するたびに`npm run dev`するのはだるいです。
ので、↓

```
npm run dev-srv
```

ファイルの更新を自動で検知しコンパイルします。
コンパイルしたファイルは`http://localhost:8081`で公開されます。
※`main.js`にアクセスしたい場合、`http://localhost:8081/main.js`

`test.html`も

```html
<script src="./main.js"></script>
↓
<script src="http://localhost:8081/main.js"></script>
```
へ修正します。

これで、ブラウザをリロードするだけで最新のjsをロードするようになります。

## EX：ブラウザも自動でリロードする

実際にはブラウザも手動でリロードするのは面倒くさいですよね。
ってことで、下記を準備。

`package.json`と同じ階層（以降、カレント）に`webpack.config.js`を↓の内容で作成。
[※Webpackのwatch周りの設定](https://webpack.js.org/configuration/watch/#watch)

```javascript
module.exports = {
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    }
};
```

この状態で、

```
npm run dev
```

すると、js更新時に自動でコンパイルして、`./dist/main.js`がコンパイルされた内容で上書きされるようになります。
※Webpackでコンパイルした後、更新の監視待機するようになる

で、カレントで↓を実行（browser-syncのインストール）する。

```
npm install browser-sync -g
```
で、カレントで↓のコマンドを実行する。

```bash

browser-sync start --server --files ./dist/*.js

# HTMLも対象に入れる時はこっち
browser-sync start --server --files ./dist/*.js,./dist/*.html
```
これで下記になります。

* カレントが`http://localhost:3000`で公開される。  
※`test.html`, `main.js` のURLは `http://localhost:3000/dist/test.html`, `http://localhost:3000/dist/main.js`
* `./dist/*.js`のファイルが更新された場合、`http://localhost:3000`を開いているタブが自動でリロードされるようになる。

これに合わせて、`test.html`を

```html
<script src="http://localhost:8081/main.js"></script>
↓
<script src="http://localhost:3000/dist/main.js"></script>
```
へ修正します。

後は、`http://localhost:3000/dist/test.html`を開いていれば、jsファイル更新で自動的にブラウザがリロードされます。

※
1. webpackがjsの更新を検知してコンパイルし、`./dist/main.js`を上書き
2. browser-syncが`./dist/main.js`の更新を検知して、ブラウザをリロードする
という流れ