はじめに
業務でwebpackを使用する機会があるので、学習したことをまとめていきます。
今回は、Node.jsのインストール・jsファイルのバンドル・Loaderを使ってcssのバンドルを実際に行います。
※一度にいろいろやると分からなくなるので、今回はjsファイルのバンドルまで行います。次回Loaderを用いてcssやscssファイルをバンドルする手順についてまとめます。
以前の学習まとめはこちらpackage.jsonとpackage-lock.jsonのバージョン指定や必要性について
今回使用するツールなどのバージョン
- Node.js：12.16.3
- npm：6.14.4
- webpack: 5.58.1
- webpack-cli: 4.9.0
webpack導入の前に
図が多くわかりやすかったので、こちらの記事を見ておくとイメージが少しつくかと思います。
webpack学習の基本のき
前準備
１．Node.js/npmの導入
webpackを使用するには、Node.jsが必要になるためまずはインストールをしていきます。Node.jsをインストールする際に、npmもインストールされます。
インストールが完了したら、以下のコマンドで確認しバージョンが表示されればOK。
node -v
v12.16.3
npm -v
6.14.4
２．プロジェクトディレクトリの作成とpackage.jsonの作成
Node.jsがインストールできたら、次はプロジェクト用のディレクトリを用意します。
作成したディレクトリに移動したら、以下のコマンドでpackage.jsonを作成します。
色々設定について聞かれますが、特に気にせずEnterでOK。
npm init
上記のようにすべてEnterで問題ない場合は、以下のようにオプションを付けることで何も聞かれることなくpackage.jsonが作成できます。
npm init -y
３．webpack/webpack-cliのインストール
今回はwebpackを使いたいということで、webpackとwebpack-cliの２つをとりあえずインストールします。webpackとwebpack-cliについての細かいところはこちらを
→webpack/webpack-cli
以下のコマンドを実行。
npm install --save-dev webpack
npm install --save-dev webpack-cli
インストールを行うと、ディレクトリ内にnode_modulesが作成されます。
４．webpack.config.jsとバンドルするためのjsファイルを準備
webpack.config.jsとは、webpackの設定ファイルです。
このファイルで、エントリポイントやバンドルしたファイルの出力場所などなどを記載していきます。
まずは、エントリポイント用のjsファイルを作成します。
今回はindex.jsとします。中身に関しては後ほど。
次に、webpack.config.jsを作成します。
内容は以下のように。
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, "index.js"), //エントリポイントであるファイルのパスを指定
output: {
path: path.resolve(__dirname, 'dist'), //バンドルしたファイルの出力先のパスを指定
filename: 'bundle.js' //出力時のファイル名の指定
}
}
const path = require('path')
pathは、Node.jsにデフォルトであるモジュール。
path.resolve()は、引数のパスをもとに絶対パスを返します。
公式ドキュメントを読んだのですがよくわからなかったので以下のサイトも参考にしました。
絶対パスを返す。
引数の後ろから順に評価、結合していく。
途中で絶対パスが完成したら結合途中でも処理を抜ける。path.resolve('/a', '/b', '/c');
=> /cpath.resolve('/a', '/b', 'c');
=> /b/cpath.resolve('/a', 'b', 'c');
=> /a/b/cpath.resolve('a', 'b', 'c');
=> current_path/a/b/cpath.resolve(__dirname, 'a', 'b', 'c');
=> current_path/a/b/c引数の右から順位処理をしていき、”/”に当たった時点で絶対パスが作成されるため、そこで処理が終了する。つまり引数の文字列の先頭に”/”がある場合、そこまでで処理が終わる。
最後まで絶対パスができなかった場合は実行時のcurrent_pathを付けて返す。
引用元：path.resolve()の使い方
そのため、今回であれば
entryは、current_path/index.js
output（出力する際に作成される）は、current_path/dist/bundle.js
というようになります。
参考
Node.js v12.22.7 Documentation
現在のディレクトリ構成はこんな感じ
practice
├─ node_modules
├─ index.js
├─ package.json
├─ package-lock.json
└─ webpack.config.js
先ほどの、webpack.config.jsの出力設定だとpracticeディレクトリの直下にdistというディレクトリが作成され、そこにbundle.jsというバンドルファイルが作成されます。
５．html、jsファイルを用意する
前準備は大体できたので、あとはバンドルする用のファイルを用意する。
js用ディレクトリを用意し、jsディレクトリには、sum.jsとdevide.jsを作成します。
現在のディレクトリ構成は以下の通りです。
practice
├─ node_modules
├─ src
| └─ js
| ├─ devide.js
| └─ sum.js
├─ index.html
├─ index.js
├─ package-lock.json
├─ package.json
└─ webpack.config.js
各ファイルに処理を記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>webpack学習</title>
<!-- バンドルしたファイルを読み込む -->
<script src="dist/bundle.js"></script>
</head>
<body>
<p class="message">webpack学習中！！</p>
</body>
</html>
export default function hello(a, b) {
return a / b;
}
export default function sum(a, b) {
return a + b;
}
import sum from './src/js/sum.js';
import devide from './src/js/devide.js';
var a = 10;
var b = 2;
var result = 'sum()の結果は' + sum(a, b) + ' devide()の結果は' + devide(a, b);
alert(result);
これでファイルの準備はOK。
今回は、足し算結果を出力する処理が記載されたsum.jsと割り算結果を出力する処理が記載されたdevide.jsをバンドルする。
webpack.config.jsで設定したエントリーポイントがindex.jsであるため、このファイル内でバンドルしたいjsファイルを読み込む。
６．scriptsにコマンドを追加
package.jsonのscriptsでコマンドを追加することで、簡単にコマンド実行が出来るようになります。以下のようにコマンドを追加します。
{
"name": "practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"version": "webpack -v",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch": "webpack --mode development --watch",
"test": "echo \"Error: no test specified\" && exit 1",
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0"
}
}
scriptsでは「コマンド名:実際に実行したいコマンド」のように記載します。
基本的に実行するにはnpm run コマンド名で実行します。
試しに、npm run versionと実行すると、以下のようにwebpackなどのバージョンが確認できます。
webpack: 5.58.1
webpack-cli: 4.9.0
webpack-dev-server not installed
他の設定したコマンドのざっくりした説明は以下の通り。
webpack --mode developmentは、開発用のビルド
webpack --mode productionは、本番環境用のビルド
webpack --mode development --watchは開発用のビルドで、ファイルの変更を検知して自動でビルドしてくれる。
7.いざバンドル！
以下のコマンドでバンドルします。
npm run dev
バンドルが完了したら、index.htmlをブラウザで確認します。
以下のように、アラートで処理結果が表示されればバンドル成功です。
まとめ
今回はNode.jsの導入からwebpackを用いたjsファイルのバンドルまでをやってみました。以前まではwebpackは難しいものというイメージがありましたがわかってくると便利そうだなと思いました。
いきなり実務で使われている、webpack.config.jsを見てしまうと設定が色々あってくじけてしまうのでぜひ今回のように少ない設定項目から始めるといいのではないかと思います。