webpack

Webpackの導入手順を画像付きで分かりやすく解説

本記事では、Webpackの導入手順と基本的な使い方について解説しています。

Webpackの学習におすすめ動画
モジュールバンドラー webpackを1日で習得!
フルスクラッチでインストールからカスタマイズまでを理解する

動画情報
作成者はむさん
学習時間6.5時間
受講者数2,572人
レビュー (361件)
動画の詳細はこちら

STEP1. Node.jsのインストール

まず、Webpackを使うにはNode.jsをインストールする必要があります。

こちらのNode.js公式ページにアクセスし、LTS(推奨版)と記載されているものをインストールします。

Node.jsインストール
LTSとCurrentの違い
  • LTS(Long Time Support):長期間サポートされている
  • Current:Node.jsの開発者が新しく追加された機能を試す環境

node.jsをインストールしたら下記のコマンドを実行して正しくインストールができているか確認します。

npm -v

コマンドを実行してバージョン(例:6.13.4)が返ってきたら正しくインストールがされています。

以上で、Node.jsのインストールが完了です。

STEP2. package.jsonの作成

Node.jsのインストールが完了したら、package.jsonの作成をします。

下記コマンドを実行するとpackage.jsonが作成されます。

npm init -y
package.jsonの作成
package.jsonの作成

STEP2. Webpackのインストール

package.jsonを作成したら、Webpackを実行させるために必要なパッケージをインストールします。

下記のコマンドを実行すると、packge.jsonのdevDependenciesに「webpack」「webpack-cli」が追加されます。

npm install --save-dev webpack webpack-cli
devDependenciesにパッケージ情報が追加
devDependenciesにパッケージ情報が追加

STEP3. Webpackを実行してみよう

これでWebpackが実行できる環境が整ったので、実際にWebpackを実行してみましょう。

srcディレクトリを作成し、その中に下記の内容を記述したindex.js、module.jsのファイルを配置します。

import { plusFn } from "./module";

plusFn(3, 4);
export const plusFn = (num1, num2) => {
  console.log(`合計値:${num1 + num2}`);
};

この状態で下記のコマンドを実行します。

npx webpack

すると、新しくdistディレクトリが作成され配下にはmain.jsの新規ファイルがあります。このmain.jsファイルはsrcディレクトリで作成したindex.jsとmodule.jsをバンドルしたものです。

main.jsの出力
main.jsの出力

正しくバンドルされているか確認しましょう。distディレクトリ内に下記の内容を記述したindex.htmlファイルを配置します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

この状態でindex.htmlファイルを開き検証ツールでコンソールを確認すると、index.jsとsample.jsで記述した処理(合計値:7)が出力されていることが確認できます。

STEP4. Webpackのカスタマイズ方法

最後に、Webpackのカスタマイズ方法について解説します。Webpackでは様々なパッケージをインストールして自分が使いやすい開発環境を構築することができます。代表的な例では画像の圧縮やSassのコンパイルなどが挙げられます。

Webpackをカスタマイズするには、webpack.config.jsと呼ばれるwebpack専用のファイルを作成しその中に処理を組んでいきます。

実際にwebpack.config.jsをカスタマイズしてみましょう。下記の内容をwebpack.config.jsに記述してください。

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./public"),
    filename: "main.js",
  },
};

上記の内容はwebpack実行後に出力されるファイルをdistディレクトリではなく、publicディレクトリに変更する内容です。これでwebpackを実行してみましょう。

npx webpack

すると、新しくpublicディレクトリが出力されたのが確認できました。

publicディレクトリの出力
publicディレクトリの出力

まとめ

今回の記事では、Webpackの導入手順とwebpackの基本的な使い方について解説しました。

Webpackはあまり見慣れない記述の仕方をするため、苦手意識を持っているエンジニアの方が多いと思いますが、Webpackは一度だけ設定をしてしまえば、案件によっては使い回せることが多くとても便利なツールです。また、近年のWeb開発ではGulpではなくWebpackを使うことが多い傾向ににあるので、この機会に頑張って習得しましょう!

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村