WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

公開日:

webpack.config.js にはザックリと何が書いてあるの?(v3系の話)

webpack.config.js にはザックリと何が書いてあるの?(v3系の話)

SPONSOR

お疲れ様です、ナガです。

フロント界隈では webpack が業務でも必須のツールとなってきていますが、そもそも webpack の設定ファイルである webpack.config.js に何が書いてあるのか僕はよく分かりません。

公式ドキュメントも英語か中国語なので外国語が読めない僕には困ります。

なので、細かい設定は除外しますが、よく使うところだけザックリと何を設定しているのか備忘録がてら日本語でメモしていきます。

nodewebpack のインストール方法などは入門記事が豊富に出揃っていますので割愛します。

想定環境

  • 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"
  }
}

webpack.config.js とは

webpack を利用するための設定ファイルです。

エントリーポイント(出力元)はどのファイルなのか、出力先、loader は何を使うのかなどを記載します。

vue-cli で生成される build ディレクトリ内には webpack.base.conf.jswebpack.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']
            }
          }
        ]
      }
    ]
  }
}

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 を指定してるので、webpackbabel を使って JS をトランスパイルできるようにしています。

test には loader を適用したいファイルを指定します。指定には正規表現が利用できます。

exclude は除外するファイル、パスを指定します。指定には正規表現が利用できます。

use は使用する loader をオブジェクトの配列で指定していきます。

オブジェクトの中身は loader には babel-loader を。

options には package.json に記載した babel-preset-env を指定するので presets に配列で env を渡します。

最後に

基本的な構成ですが、 webpack.config.js に何が書いてあるのかザックリと読めるようになっていただけたのなら幸いです。

僕もまだ webpack は全然詳しくないので、今後活用できるように頑張ります。

参考

SPONSOR

この記事をシェアする

コメント

関連記事