webpack.config.js

僕の中で少し苦手なイメージのあるwebpackについて、改めて向き合って理解していこうと思います。
webpackに苦手意識がある人のほとんどは、このwebpack.config.jsについて理解していない人がほとんど。なので、今回は下記のwebpack.config.jsについて丁寧に説明していきます。

constpath=require('path')constwebpack=require('webpack')module.exports={entry:{index:path.join(__dirname,'src','index.js')},output:{path:path.join(__dirname,'out'),filename:'main.js'},devtool:'cheap-module-eval-source-map',target:'node',module:{rules:[{test:/.js$/,loader:'babel-loader'}]},plugins:[externalPlugins]}

entryとoutput

結論から言うと、
entry:は、webpackがビルドする際に開始点となるJSファイルを設定しています。
output:は、ビルドファイルの設定。どこにどのようなファイルを出力すればよいか設定しています。

具体的にみていきます。

constpath=require('path')constwebpack=require('webpack')module.exports={entry:{index:path.join(__dirname,'src','index.js')},output:{path:path.join(__dirname,'out'),filename:'main.js'},...}

entryの設定

早速説明していきます。
簡単に理解できますので、安心してください（笑）

ここでは、webpackがビルドした際に
「./src/index.jsというファイルを探して読み込んでね。」という設定をしています。

まずpath.joinでパスを連結してくれていて、上記だと./src/index.jsというパスにしてくれています。

これを使うメリットとしては、
macやwindowsなどの開発環境によって/が¥になったりするんですけど、それを防ぐことができます。
そしてNode.jsの標準モジュールのpathを読み込ませて使用しているので、path.joinとして使用できています。

__dirnameはNode.jsで用意されているグローバル変数で、現在実行中のソースコードが格納されているディレクトリパスが格納されています。簡単に言うと、手軽に絶対パスの記述ができるものです。

outputの設定

path:とfilename:がありますね。

こちらも結論から言うと
path:は、どのディレクトリに出力するか指定しています。
filename:は、どのファイルに出力するか指定しています。

なので、
「./srcというディレクトリ内のmain.jsというファイルに出力してね。」という設定をしています。

devtool

まず、結論です。
devtool:を設定することによって、ソースマッピングのスタイルを選択して、デバッグプロセスを強化します。指定可能な値はstringとfalseです。
（参照：公式ドキュメントのdevtool）

分からない用語が出てきた？ソースマッピングですかね？

分からなければ、しっかり調べていきましょう。

ソースマップについて

ソースマップとは、Babelなどトランスパイル後と前のコードの内容を紐付けしてデバッグしやするするもの。

トランスパイルについて
JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。
具体的に何をしているのかというと、互換性のあるコードに変換をする処理。
（例）「CoffeeScriptとかを記載して、Javascriptへトランスパイルする。」みたいな感じです。
一般的にはBabelというライブラリを使います。

devtool: 'cheap-module-eval-source-map'

まとめると、ここでは'cheap-module-eval-source-map'を設定しており、公式ドキュメントによると、ビルドと再ビルトの処理速度としては遅めに処理されるようです。

...module.exports={...devtool:'cheap-module-eval-source-map',...}

target

結論から言うと、
target:を設定することによって、特定の環境をターゲットにするようにwebpackに指示してくれます。ここでは、'node'と設定しているので、Node.jsのような環境で使用するためにコンパイルしてます。

...module.exports={...target:'node',...}

module

module:オプションは、プロジェクト内のさまざまなタイプのモジュールがどのように処理されるかを設定しています。「webpack が特定のmoduleをどう扱うか」を決めるってことです。webpack ではmoduleはJavaScriptやCSSなどのファイルを指す。
ここでは、Ruleモジュールについて設定されているので、詳しくみていきます。

...module.exports={...module:{rules:[{test:/.js$/,loader:'babel-loader'}]},...}

Rule

まず結論から、
rule:を設定すると、「条件」、「結果」、「ネスト」されたルール３つの部分に分けることができます。

Rule.test

公式ドキュメントによると、テストアサーションに合格したすべてのモジュールを含めます。 Rule.testオプションを指定した場合、Rule.resourceも指定できません。
と書いてありましたが、ちょっと「？？」のままでした。

いろいろ調べてみた結果を簡単にいうと、
「Rule.testで拡張子を設定する」というイメージです。
webpackでいうmodule(JavaScriptやCSSなど)を設定するってことです。
今回で言うと、拡張子が.jsなので、test: /.js$/と設定しています。

このまま一気に説明した方が理解がしやすいと思うので、一気に説明していきます。

Rule.loader

この２つですが、簡単にいうと
まずloader: 'babel-loader'と設定することで、test: /.js$/で設定したjsファイルを'babel-loader'として読み込む設定をしています。

plugins

最後plugins:です。
pluginsオプションは、さまざまな方法でwebpackビルドプロセスをカスタマイズするために使用されます。externalPluginsというプラグインがカスタマイズされています。

公式ドキュメントによると、
webpackには豊富なプラグインインターフェイスがあります。 webpack自体のほとんどの機能は、このプラグインインターフェイスを使用します。これにより、Webpackが柔軟になります。

最後

最後の方は駆け足で説明することになりましたが、少しでも理解の手助けになれば幸いです。
こんなことを最後にいうことではありませんが、webpackについては公式ドキュメントに結構丁寧に説明が書いてあるので、そこをみれば理解できるかと思います。

何か間違い等ありましたら教えていただけると幸いです。