Webpack

https://gyazo.com/f1d4d7ad127b8a71aaa1eabcf0a6b9e9

webpack

モジュールバンドラー・・・複数のモジュールを1つにまとめたファイルを出力するツールのこと（簡潔に言ってしまえば）。

モジュール・・・機能ごとに分割されたファイルのこと。webpackは「複数のファイルをまとめたファイル」を出力するツールと認識しておけばとりあえずは問題ない。

バンドル・・・まとめられたファイルのこと。バンドルファイルとも言う。以下の言葉の意味は大体同じ。

「バンドルが大きい」 = 「まとめられたファイルのサイズが大きい」

「バンドルを生成する」 = 「まとめられたファイルを生成する」

バンドルする・・・「まとめる」という意味で使われていることが多い。

ビルド・・・webpackにおいての「ビルド」は「バンドルを出力するまでの一連の処理」という意味で使われていることが多い。

webpackを利用してモジュールをバンドルしたファイルを出力してみる。

以下は出力までのイメージ図。

https://gyazo.com/8b55648359b553f4a8361d3c22f55712

webpackをローカルにインストールする→ローカルインストールしたwebpackにPATHを通す

PATHを通す・・・コマンド検索パスを追加すること

コマンド検索パス・・・シェルがコマンド実行ファイルを探しにいくパスのこと。echo $PATH でコマンド検索パスを確認できる

webpackを利用するためにはwebpack.config.jsというファイルを作成し、このファイルに設定を記述する必要がある。

設定は以下の通り

code:js;

webpack.config.js

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく

const path = require('path');

module.exports = {

// モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る

mode: 'development',

// エントリーポイントの設定

entry: './src/js/xxx.js', // xxxは任意のファイル名

// 出力の設定

output: {

// 出力するファイル名

filename: 'bundle.js',

// 出力先のパス（絶対パスを指定する必要がある）

path: path.join(__dirname, 'public/js')

}

};

各項目の詳細は以下の通り。

mode

モード（webpack 4から追加された項目）の設定。

モードはdevelopment、production、noneが存在する。

developmentかproductionを指定すると、様々な設定が有効になってwebpackが実行される。

例えば、productionにすればoptimization.minimizerという設定が有効になり、圧縮されたファイルが出力される。

設定は上書き可能であり、上書きしたい項目はwebpack.config.jsに記述する（詳細は後述）。

entry

エントリーポイントの設定。複数設定することも可能。

エントリーポイントとはモジュール間の依存関係の解析を開始する地点のこと。（メインとなる処理を行うJavaScriptファイルのこと）

各モジュールを読み込んでメインの処理をするJavaScriptファイルだと認識しておけば良い。

output

出力の設定。

出力するファイル名や出力先のパスを指定する。

OSによってパスが異なることを防ぐために、出力先のパスの指定にはpath.join()を利用する。

app.js（エントリーポイント）

2つのアイテムを合算し、出力するエントリーポイント。

importという構文でモジュールを読み込んで利用できるため、addition-calculator.jsとtax-calculator.jsモジュールをimportで読み込んで利用している。

webpack 4では、エントリーポイントを指定しなければ自動的に「src/index.js」がエントリーポイントに、出力先を指定しなければ自動的に「dist/main.js」に出力される。

output.pathオプションを省略することもでき、その場合は出力ファイルは「dist」フォルダーに出力ファイルが生成される。

ローダー

→ローダーとは、画像やCSSといったJavaScript以外のファイルをJavaScriptで扱えるように変換したり、各ファイルに対してバンドル前に処理を実行する機能

Sassのwebpack.config.jsの設定

test:\/.css/,

Sassの対象になる（言い方が正しいかはわかんない、、、）ものの拡張子を設定してる

loader: "sass-loader"

拡張子が.sassか、.scssっていうファイルをJSとしてコンパイルするためのローダーを設定してる

css-loader

cssをJavaScriptとして読み込むためのもの

extract-text-webpack-plugin

ビルドしたJSファイルの中からStyleの部分をCSSファイルとして吐き出してくれるもの。（今回はCSSファイルとして成果物に吐き出してないからなくてもいけるかも？）

node-sass

Node.jsで使えるSass

sass-loader

.sass/.scssの拡張子のものをJavaScriptとして読み込むためのもの

style-loader

stylesheetをJavaScriptで使えるようにするためのローダー

stylelint

cssのコードにミスがなく（自分が設定したルール通りに）コードが書かれているかみてくれるもの

stylelint-config-recommended-scss

lintするルールをオンにする

url-loader

画像をJSファイルにバンドルするためのローダー

主に参考にしたサイト

config関連で参考に

loaderやplugin関連で参考に

loaderの詳しい説明に関して参考に

url-loaderやwebpackに関する基本的なところを参考に

style-loaderに関して参考に