webpack.config.js にはザックリと何が書いてあるの？（v3系の話）
投稿日：2017年12月09日
お疲れ様です、ナガです。
フロント界隈では webpack が業務でも必須のツールとなってきていますが、そもそも webpack の設定ファイルである webpack.config.js に何が書いてあるのか僕はよく分かりません。
公式ドキュメントも英語か中国語なので外国語が読めない僕には困ります。
なので、細かい設定は除外しますが、よく使うところだけザックリと何を設定しているのか備忘録がてら日本語でメモしていきます。
node や webpack のインストール方法などは入門記事が豊富に出揃っていますので割愛します。
想定環境
- Mac OS X El Capitan
- node v8.9.1
- webpack v3.10.0
package.json
使用する package.json は下記を想定しています。
babel を使ってトランスパイルして、webpack-dev-server を立ち上げるというシンプルな構成です。
お手持ちの package.json にコピペして npm install なり yarn でインストールして下さい。
{
"private": true,
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.5"
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
webpack.config.js とは
webpack を利用するための設定ファイルです。
エントリーポイント（出力元）はどのファイルなのか、出力先、loader は何を使うのかなどを記載します。
vue-cli で生成される build ディレクトリ内には webpack.base.conf.js や webpack.prod.conf.js など、それぞれの条件にあわせた設定ファイルがあって、慣れないと読むのが大変です。
※自分もまだちゃんと読めないが、なんとなくは分かるような分からないようなモヤモヤ…
webpack.config.js の例
ザックリとコメント付きで見ていきます。
// 出力先を絶対パスで指定する必要があるので path モジュールを読み込む
const path = require('path');
module.exports = {
// 出力元（エントリーポイント）
entry: './src/main.js',
// 出力先の設定
output: {
// 出力するファイル名
filename: 'bundle.js',
// 出力先のパス
path: path.resolve(__dirname, 'dist')
},
// sourcemap を使用するか否か
devtool: 'source-map',
// ローカル開発用環境の設定
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 8081
},
// 使用するモジュール
module: {
// 使用するモジュールの設定をオブジェクトの配列で設定する
rules: [
{
// 対象となる拡張子
test: /\.js$/,
// 除外するディレクトリ
exclude: /node_modules/,
// 使用する loader をオブジェクトの配列で記載
use: [
{
// loader は babel-loader を使用する
loader: 'babel-loader',
options: {
// presets は babel-preset-env を使用する
presets: ['env']
}
}
]
}
]
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
path モジュールを読み込む
const path = require('path');
一行目に記載している上記は Node.js のファイルパスの文字列解析や操作を行う標準モジュール Path モジュールを require() して読み込んでいます。
Path モジュールを使用して後述する出力先のパスの指定とローカル環境の設定をします。
entry
エントリーポイントのパスとファイル名を指定します。
つまりはここで指定する JSファイルに処理が集約されます。
ドキュメントを見る限りオブジェクトでも文字列でも指定できますが、ここでは説明を簡略化するためにシンプルに文字列指定にしています。
output
出力するファイル名と、出力先のパスをオブジェクトで指定します。
出力先のパスは絶対パスで指定します。
ここで先ほどの Path モジュールを使用します。
Path モジュールの説明は Node.js の公式ドキュメントを参照してください。
path.resolve(__dirname, 'dist') という処理で帰ってくる値は下記のような値になります。
/Path/To/Your/Project/Root/dist
つまりは下記に entry で指定したファイルが bundle.js という1つのファイルにバンドルされるという事になります。
/Path/To/Your/Project/Root/dist/bundle.js
出力されるファイル名は任意の名前を設定できますが、オプションが何個かありますので使い方は公式ドキュメントを参照してください。
devtool
ここでは出力する sourcemap を指定します。
例では一般的（？）な source-map を出力するようにしています。
尚、指定しないの場合は sourcemap は吐き出されません。
sourcemap の種類は公式ドキュメントを参照してください。
devServer
webpack-dev-server の設定、つまりローカル開発環境の設定になります。
contentBase にはどこを DocumentRoot のパスに設定するかを指定します。
port には使用するポート番号を指定します。
例では 8081 を指定するので localhost:8081 が開発環境になります。
オプションが豊富なので詳しくは公式ドキュメントを参照してください。
module.rules
webpack の肝となる部分です。
使用する loader を指定します。
例では babel-loader を指定してるので、webpack で babel を使って JS をトランスパイルできるようにしています。
test には loader を適用したいファイルを指定します。指定には正規表現が利用できます。
exclude は除外するファイル、パスを指定します。指定には正規表現が利用できます。
use は使用する loader をオブジェクトの配列で指定していきます。
オブジェクトの中身は loader には babel-loader を。
options には package.json に記載した babel-preset-env を指定するので presets に配列で env を渡します。
最後に
基本的な構成ですが、 webpack.config.js に何が書いてあるのかザックリと読めるようになっていただけたのなら幸いです。
僕もまだ webpack は全然詳しくないので、今後活用できるように頑張ります。