webpack

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

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

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

最短3ヶ月でエンジニアになれる!?
転職成功率98%のプログラミングスクール
DMM WEB CAMP

先輩くん
先輩くん
オンライン完結で24時間どこでも学習することができるよ!
後輩ちゃん
後輩ちゃん
未経験から憧れのエンジニアになるぞ〜!!
簡単30秒で無料相談申し込み

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アクセスランキング にほんブログ村