[Sy] はじめての webpack（ webpack.config.js を使ってみる）

2018/02/26

前回の記事ではコマンド実行時に元のファイルと出力先となるファイルの指定を行ってました。そのあたりのめんどくさい部分を、今回は webpack.config.js というファイルを作り、設定としてあらかじめ用意しておくことで楽にする手順を説明します。

前回の記事はこちらです。

⇒ [Sy] はじめての webpack（ yarn でインストール＆動作確認）

今回やることは、前回の記事の続きになります。

1. webpack.config.js を作成する

以下のようにファイルを作成します。

(webpack.config.js)

module.exports = {
  entry: __dirname + '/src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
};

この設定だと、 /src/index.js をメインのファイル（エントリー）として、 /src/lib/hello.js もまとめて /dist/bundle.js として出力する、という動きをします。

2. 動作確認

前回はビルドする際に長いコマンドを打つ必要がありましたが、今回は webpack.config.js を用意したので以下のように実行できます。

$ ./node_modules/.bin/webpack
Hash: 9592aeaf3ab20abeeb74
Version: webpack 3.10.0
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.98 kB       0  [emitted]  main
   [0] ./src/index.js 43 bytes {0} [built]
   [1] ./src/lib/hello.js 79 bytes {0} [built]

/dist/bundle.js が出力されていればOKです。

ひとこと

webpack 4 がリリースされました。

⇒ 🎼webpack 4: released today!!✨ – webpack – Medium

上の記事は 3.10 の環境で動かしてます。記事書きかけでしばらく放置してたらリリースされたのでとりあえずそのまま公開しちゃいました。。。