Webpackは下記のフロントエンドロードマップの必須項目となっていたのでとりあえず触れてみました。
フロントエンドロードマップ → https://roadmap.sh/frontend
この記事では、Webpackの入門編ということで
- Webpackとはモジュールバンドラとはどういうものなのか
- Webpackの導入手順
- 開発効率化のための簡単なカスタマイズ
について紹介します。
僕自身、初めてWebpackを触ってみたので、その備忘録といったところです。
モジュールバンドラ『Webpack』とは
WebpackとはWebサイトを構成する複数のファイルをまとめることのできるツールです。
主にJavascript のモジュールをまとめることに使用されますが、cssファイルや画像ファイルもまとめることができます。
複数のファイルをまとめることで、リクエスト数を減らすことができ、サーバーとクライアント間での転送速度を高速化できるようになります。
要するにサイトの表示速度が上がるということです。
またWebpackには、ファイルのバンドラだけでなく、jsの圧縮やローカルサーバーの起動などフロントエンド開発に便利な機能もあり、Gulpのような複数のツールを組み合わせる必要がありません。
フロントエンドエンジニアにとりあえず必要な技術が揃い、包括的な開発環境を作ることのできるツールです。
Webpackの導入手順
実際にWebpackを導入する手順を解説していきます。
今回の導入手順は下記を前提としています。
- Node.jsをインストールしており、npm install 等のコマンドを使える。
- 筆者の開発環境：Windows10、VScode
また、ターミナルはVScode内のPowerShellを使用しました。
作業するフォルダのディレクトリへ移動
cdコマンドを用いて、作業フォルダのあるディレクトリへ移動します。
Userフォルダのnameフォルダのwebpack-sampleを作業フォルダとした場合、下記のようになります。
C:\Users\name\webpack-samplewebpack本体「webpack-cli」のインストール
まず、下記のコマンドを実行することで、デフォルト設定でプロジェクトの詳細情報を表示し、設定情報が記載されたpackage.jsonファイルを作成します。
npm init -y次に、Webpackを実行するためのwebpack本体「webpack-cli」をインストールします。
インストールには、下記のコマンドを使用します。
npm install -D webpack webpack-cli正常にインストールすることができたら、Webpackを使用することのできる環境は整いました。
実際にWebpackでjsファイルをバンドルしてみる。
Webpack本体をインストールすることができたところで、実際にES ModulesのJavaScript処理をWebpackでバンドルしてみます。
Webpackインストールしたフォルダ直下にsrcフォルダを作成しバンドル用のindex.jsとsub.jsという2つのjsファイルを作成します。
// import 文を使って sub.js ファイルを読み込む。
import { hello } from "./sub";
// sub.jsに定義されたJavaScriptを実行する。
hello();// export文を使ってhello関数を定義する。
export function hello() {
alert("Hello World!");
}ファイルを作成し、下記のコマンドをビルドします。
npx webpackビルドすると、index.jsファイルとsub.jsファイルがバンドルされ、distフォルダが作成されmain.jsにバンドルされたコードが出力されます。
出力したmain.jsファイルを作成したhtmlファイルで読み込むことでバンドルされたコードが実行されます。
開発効率化の簡単カスタマイズ
前項までの手順で、Webpackを使用することはできるようになりました。
しかしそのままだと、シンプルながらもWebpack特有のビルドコマンドを打つ必要があることやコードの変更のたびにビルドしてブラウザをリロードする必要があるなど、効率よい開発とは言い難い環境です。
ここからは、このような非効率な環境を効率化するための基本的で簡単なカスタマイズを紹介します。
主なカスタマイズ内容は以下です。
- webpack-dev-serverモジュールのインストール
- package.jsonの編集
- Webpackの編集
webpack-dev-serverモジュールのインストール
webpack-dev-serverモジュールをインストールすることで、コードの変更の検知からWebpackビルドコマンドの実行、ブラウザのリロードまでを自動化することができます。
下記コマンドを実行し、インストールしましょう。
npm i -D webpack webpack-cli webpack-dev-serverコマンド npx webpack serve を入力することで、起動することができます。
package.jsonの編集
package.jsonファイルのscriptsを下記のようにカスタマイズ することで、 npm scripts で実行できるようになります。
{
"scripts": {
"build": "webpack",
"start": "webpack serve"
},
"devDependencies": {
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1"
},
"private": true
}この編集で、
npx webpack→npm run buildnpx webpack serve→npm start
というように npm scripts のコマンドで実行できるように設定しました。
webpack.config.jsの編集
作業フォルダのディレクトリ直下に、webpack.config.jsファイルを作成することで、webpackの動作の設定を行うことができます。
今回のプロジェクトでのwebpack.config.jsの設定は下記のように設定しています。
module.exports = {
// モード値を production に設定すると最適化された状態で、
// development に設定するとソースマップ有効でJSファイルが出力される
mode: "development",
// ローカル開発用環境を立ち上げる
// 実行時にブラウザが自動的に localhost を開く
devServer: {
static: {
directory: "dist",
},
open: true
},
devtool: 'source-map'
};devServerの設定項目directoryにルートフォルダを指定、open: trueの設定にし npx webpack serve もしくは npm startのコマンドを入力することで起動することができます。
2021年8月にwebpack-dev-serverのv4がリリースされており、リリース以前に執筆されたv3バージョンの記事では devServerの設定 が、
devServer: {
contentBase: path.join(__dirname, "dist"),
}となっています。
しかし、v3とv4では使用が変わっており、staticを使用した設定となるので注意して下さい。
詳細は、下記で確認することができます。
https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md
終わりに
今回、ics.mediaさんの下記記事を参考にさせていただきました。
https://ics.media/entry/12140/#module-bundler-comparison
2021年8月にwebpack-dev-serverのv4がリリースされていたためv4仕様には対応していませんが、Webpackの入り口を理解するには十分わかりやすかったです。
以上、『【Webpack入門】JavaScriptのモジュールバンドラ『Webpack』に触れてみた。』でした。
Coment