webpackとは

モジュールバンドラというツールです。
node.jsで動作するため、事前にインストールを済ませておいてください。

モジュールバンドラとは何か

bundleという単語が「束ねる」という意味という点からも想像できるかと思いますが、JavaScriptを一つにまとめあげるツールです。

どんなことができるか

普段は公式サイトからダウンロードして、HTMLファイルで別途読み込んでいたjQueryなどのライブラリをJS上で読み込みつつ、最終的には一つのスクリプトファイルにまとめることができます。
また、CSSではよくある「このブラウザに対応させるためには、プレフィックスを付けないと・・・」的な変換も自動で実施できるようになります。

webpackのインストール

JavaScriptのパッケージマネージャであるnpmにてインストールします。
まずは初期設定ですね。

npm init

そして、webpackのインストールです。

npm i -D webpack

インストールが完了したあとは、初期設定を行います。


npx webpack

すると以下のようなメッセージ出力されます。

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

webpackの動作に必要なwebpack-cliをインストールするとのこと。
yesを入力してインストールします。

インストール完了後、ERROR in Entry module not foundというようなエラーが表示されるかと思いますが、現時点では気にしなくて大丈夫です。（後ほど設定します。）

webpackの設定

webpackの設定ファイルは、webpack.config.jsにて行います。
まずはこちらを新規作成します。


touch webpack.config.js

（※私の場合ですが、コマンドで作成しています。）

そして、設定には、module.exportsメソッドを使用します。

webpack.config.js


module.exports = {
}

まずは最小構成として、対象となるJSファイルの設定し、その他は初期設定で実施してみます。
実施前に、前提となるディレクトリ構成を記載します。
（最低限これがあれば大丈夫という程度なので、環境によりその他のディレクトリやファイルが存在していても問題ありません。）

.
├── node_modules
├── package-lock.json
└── src
    └── js
        └── index.js

上記のディレクトリ構成を元に、まずは対象となるファイルのパスを記載します。
entryプロパティにパスを指定します。

webpack.config.js


module.exports = {
  entry: './src/js/index.js'
}

これで試しに実行してみます。

npx webpack

するとdistフォルダが生成され、そこに出力結果としてのファイルが生成されています。
(※distだけ抜粋します。）

.
└── dist
    └── main.js

このようにdistフォルダに、main.jsというファイル名で生成されました。

最小構成での実施なので、webpackの利点がほぼ伝わらないかと思いますが、この後行うBabelと組み合わせることで、その利便性はグッと増します。

実行方法についての補足

実行時、npx webpackのような実行方法をとっていましたが、そのほかにモードオプションを指定する必要があります。
また、そのモードも二種類、productionモードとdevelopmentモードが存在します。

developmentモードでの実行

npx webpack --mode development

となります。
その際、-wというオプションを追加するとgulpでもあるようなwatch機能が使用できます。
ファイルの変更を監視して、自動で実行してくれる便利なやつですね。

productionモードでの実行

npx webpack --mode production

となります。

面倒だからpackage.jsonに追記

いちいちこの長いのを書いて実行するのは面倒なので、短縮させるため、package.jsonに追記します。

package.json

/* 省略 */
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prod": "webpack --mode production",
    "dev": "webpack --mode development -w"
  },
/* 省略 */

このように、package.jsonのscriptsに追記したコマンドは、npm run XXXで実行できます。
つまり、productionモードにてwebpackを実行したい場合は、npm run prodとするだけでよくなるのです。

次は、Babelを使用してみようと思います。

追記 : 出力先の指定

出力先を指定のディレクトリにしたい、ファイル名にしたい場合などは、下記のようにoutputを追加し、output.filenameにファイル名をoutput.pathにパスを記載すると指定先に出力できます。

webpack.config.js

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: '指定のファイル名',
    path: '指定先の絶対パス'
  }
}