ざっくりwebpack ~その壱~

# 概要
開発メンバーの偉い人が環境作ってくれた上にREADMEに事細かくビルド方法とか環境構築のやり方が書いてあって`npm`か`yarn`叩けばすべてオッケーみたいな状態になってる事ない？
そんで他の開発環境作ることになっても「偉い人が書いたコードだし」みたいな感覚でそのままコピペして使って...

そしてぬるま湯に浸かったまま自分が環境作っていかなきゃならなくなった時にきっとこう思う
**「webpackってどうやって使うんだよ...」**

このまま行けば間違いなく訪れるであろう悲劇を回避するためにも、少しずつでもざっくりでも知っておくことが必要だと感じたので書き記す

# こんな感じからスタート
まずはバンドルツールとして基本的な流れを追ってみるのだ
`scripts`配下のjsどもを`webpack`を使ってバンドる

```
public/
　 ├ index.html
　 └ app.bundle.js
src/
├ scripts/
│ 　 ├ hoge1.js
│ 　 ├ hoge2.js
│ 　 └ hoge3.js
│ └ app.js
└ webpack.config.js
package.json
``` 
## まずはじめに  
使う前に必要なパッケージはいれないとな！

```bash:ターミナル
$ yarn add -D webpack webpack-cli babel-loader @babel/core @babel/preset-env
```

- `webpack` -> webpackの事やるんだからそりゃ入る
- `webpack-cli` -> 4以前は一緒になってたけど、分割されたらしいのでこれもいれる
- `babel-loader` -> ES6で書くから必要
- `@babel/core` -> babelの本体
- `@babel/preset-env` -> 変換設定するためのやつ


```text
Q.まずローダーってなんだろ？  
A.webpack自体はjavascriptしか分かんないから、他の言語で書かれた(cssとか)ファイルをモジュールに変換してくれる機能...らしい  

Q.でもES6ってjavascriptじゃん  
A.ES6対応してないブラウザ多いからbable-loader通してbabelで古い書き方に対応してくれる感じ？

Q.@babel/preset-envってなんすか？
A.上でES6対応してないブラウザ多いって言ったけど、ブラウザもバージョン上がったら順次対応はしていくわけで。 
ブラウザのバージョンとか指定するとその環境に合わせてよしなにやってくださるようです。
```  

## modeの設定
ではwebpack.config.jsを書いていく
まずはじめに`mode`の設定

```javascript:weback.config.js
// outputのパスを絶対パスで書く必要があるのでパスモジュール読込
const path = require('path')

module.exports = {
  // webpack4からmodeを設定しないと警告が出るようになったので設定
  mode: 'development'
}
``` 

コメントに書いたけど`mode`の設定をしないと文句言われる

```bash:ターミナル
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
```

**`mode:`** 
---
`production` `development` `none` の３つある
productionモードでビルドすると圧縮される。
あと`none`ていつ使うの？

`development`
<img width="682" alt="development.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542652/87735045-bea9-783d-9c88-c3795d632108.png">
`production` どうです？圧縮されてるでしょう？
<img width="698" alt="production.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542652/6a6fb51c-a766-644e-e0a8-a14313c51bc5.png">

## enrtyの設定
`mode`の設定ができたので、`enrty`を書いていく

```javascript:webpack.config.js
module.exports = {
  // webpack4からmodeを設定しないと警告が出るようになったので設定
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/app.js'
}
```

**`entry:`** 
---
ここで指定された`.js`を親分として、子分どもをまとめてくれる
複数の親分（エントリーポイント）を指定する事も可能

## outputの設定
続いて`output`を書く
その名の通り出力ファイルや出力先の設定

```javascript
module.exports = {
  // webpack4からmodeを設定しないと警告が出るようになったので設定
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/app.js',
  // 出力先を設定
  output: {
    // 出力する時の名前
    filename: 'app.bundle.js',
    // 出力先のファイルパス（絶対パスじゃないとダメ）
    path: path.join(__dirname, 'public')
  }
}
```

**`filename:`**
---
その名の通り出力する時のファイル名
[name]とか[hash]とかあるけど、また後日書いてみようと思う
**`path:`**
---
出力先のディレクトリパスを指定するが、`絶対パス`で指定する必要がある

```bash:ターミナル
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./public" is not an absolute path!
   -> The output directory as **absolute path** (required).
```

ここもコメントにあるけど、`'./public'`みたいに`相対パス`で書くと文句言われる

## んじゃビルド
ファイルの入出力に関する設定が終わったので、ビルドしてみるぞ
`package.json`にこれを追加する

```json:package.json
"scripts": {
  "build": "webpack"
 },
```
そしたらコマンド叩く

```bash:ターミナル
$ yarn build
```
or

```bash:ターミナル
$ npm run build
```

`public/`が生成されて、`app.bundle.js`が出力されたな？されたよな？？
されたら続きは[其の弐](https://qiita.com/HeRooooo/items/153a1ac67ebd08c5f6c8)で！