Help us understand the problem. What is going on with this article?

ざっくりwebpack ~その壱~

概要

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

そしてぬるま湯に浸かったまま自分が環境作っていかなきゃならなくなった時にきっとこう思う
「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 の3つある
productionモードでビルドすると圧縮される。
あとnoneていつ使うの?

development
development.png
production どうです?圧縮されてるでしょう?
production.png

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

or

ターミナル
$ npm run build

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした