概要

開発メンバーの偉い人が環境作ってくれた上に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

まずはじめに

使う前に必要なパッケージはいれないとな！

ターミナル

$ 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 -> 変換設定するためのやつ

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

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

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

modeの設定

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

weback.config.js

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

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

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

ターミナル

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

production どうです？圧縮されてるでしょう？

enrtyの設定

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

webpack.config.js

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

`entry:`

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

outputの設定

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

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

`filename:`

その名の通り出力する時のファイル名
[name]とか[hash]とかあるけど、また後日書いてみようと思う

`path:`

出力先のディレクトリパスを指定するが、絶対パスで指定する必要がある

ターミナル

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にこれを追加する

package.json

"scripts": {
  "build": "webpack"
 },

そしたらコマンド叩く

ターミナル

$ yarn build

ターミナル

$ npm run build

public/が生成されて、app.bundle.jsが出力されたな？されたよな？？
されたら続きは其の弐で！

ざっくりwebpack ~その壱~

概要

こんな感じからスタート

まずはじめに

modeの設定

mode:

enrtyの設定

entry:

outputの設定

filename:

path:

んじゃビルド

`mode:`

`entry:`

`filename:`

`path:`