モジュールハンドラWebpackとは何かをEnvaderで学んだ

2022年3月18日 01:13

React開発環境でなんとなく使っているWebpackというものがさっぱりわからなかったので勉強してみました。

Webpackとは

Node.jsのJavaScript環境においてファイルなどを束ねる役割を持つモジュールハンドラ。という説明がされています。

モジュールハンドラって？

モジュールハンドラでググるとWebpackが出てくる盥回し状態ですが、要するにHTMLやCSS、jsファイルや画像といったモジュールをひとまとめにしてくれる仕組みです。
昔はこういうJavaScriptを取りまとめる仕組みがなかったので開発がめちゃくちゃめんどくさかったそうです。

Webpackを使う意味

必要なファイルを自動で結合してくれる。
JavaScriptモジュールをブラウザで扱えるようになる。
依存関係などを気にせず開発することができる。
コード数が減るので可読性も向上しする。
リクエスト回数が減るのでサーバーの負担も減る。
pluginも豊富。

Node.jsでJavaScript扱うからにはなくちゃ困るくらいの勢いです。

Installしてみましょう

以降はEnvaderの仮想環境で作業します。
まずはnpmの初期化が必要です。
適当なプロジェクトに見立ててディレクトリを作成しそのディレクトリ内に移動します。

mkdir tekitoupj
cd　tekitoupj
# npm初期化
npm init -y

そしてインストールします。

npm install --save-dev webpack webpack-cli

webpack-cliもインストールしないとwebpackは使用できません。

とりあえず実行して見るためのファイル・ディレクトリ構造

このような構成でディレクトリとファイルを作成します。

tekitoupj
├── dist
│   ├── bundle.js
│   └── index.html
├── package-lock.json
├── package.json
├── src
│   ├─ index.js
│   └─ modules
│    └─helloworld.js
└── webpack.config.js

Hello Wordしてみる

srcディレクトリの下のhelloworld.jsを編集します。

export const helloWorld = (message) => {
  console.log(message);
};

次にsrcディレクトリのindex.jsを編集します。

import { helloWorld } from './modules/helloWorld.js';

helloWorld("Hello World");

【おまじない】webpack.config.jsの設定

modeはとりあえず開発環境developmentとします。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: `./src/index.js`,
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, 'dist')
  }
};

package.jsonの設定

scriptsという箇所を若干変更します。
devの末尾に--watchを追加することでコマンド入力せずにバンドルを実行できるようになります。

"scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },

コンパイルの実行

ここまで間違いがなければコンパイルできるはずです。
間違っていれば教えてくれるのでよーくエラーコードみて修正すれば必ず動きます。

npm run dev

運良く（？）コンパイルできました。

コード引用：Webpackの使い方

まとめ

一通り実行してみることで、なんとなーくwebpackの仕組みがわかりました。
とはいえHello worldしただけで完全に理解できたわけではないので使っていく中で身につけたいと思います。

参考資料

これらの記事を参考にさせていただきました。