webpackとは何のこと？導入メリットや使い方を詳しく解説！

「webpack」がどのようなものかご存知でしょうか。webpackとはモジュールバンドラのことで、JavaScriptなどの 複数のモジュールを1つにまとめてくれるツールです。

しかしモジュールバンドラといっても、具体的にどのような導入メリットがあり、どのように使っていいのか疑問に感じている方も多いでしょう。

今回の記事ではそのような「webpack」について、今後導入を考えている方向けに詳しくご紹介していこうと思います。

2021.01.03JavaScriptの効率の良い習得方法を解説【初心者が習得するまでの流れ】

1 webpackとは何か
2 webpackを導入するメリット
3 webpackの導入方法
- 3.1 webpackの導入準備
- 3.2 webpackファイルの設定
4 webpackの使い方
- 4.1 2つのファイルをまとめる
- 4.2 CSSファイルをまとめる
5 まとめ

webpackとは何か

まず始めに、「webpack」についてもう少し詳しくご紹介していきます。

webpackはJavaScriptモジュールを束ねることができるツールです。

モジュールというのはプログラムにあるJavaScriptファイルやsassファイルなどが当てはまります。モジュールバンドラということで、バンドルは”束にする“という意味になるため、webpackを使うことで複数のJavaScriptファイルやsassファイルを、それぞれ束にしてまとめることができるのです。

Web アプリケーションを構成する要素は複数あり、例えば画像であったり装飾するためのCSSファイルなどがあります。webpackはこれらを束ねるため、開発の際にリソースを扱いやすくなります。

webpackを導入するメリット

保守性が高くなる
ローダやプラグインなどが豊富
リクエストが1回で済むため効率的
ライブラリからサンプルを見つけやすい
依存関係のあるJavaScriptのモジュールを解決できる

webpackを導入するメリットは上記の通りです。それぞれのメリットについて詳しくご紹介していきます。

保守性が高くなる

日常生活の中でも整理整頓ができていないと、「どこに何かあるかわからない」といった経験があるでしょう。

webpackを導入することで、複数のファイルをまとめてくれるため管理しやすくなります。また記述するコードも短くて済むため、セキュリティー面など保守性が高くなることが特徴です。

ローダやプラグインなどが豊富

webpackは、JavaScriptファイルでないものをJavaScriptファイルへと変換できる「ローダ」が豊富にあります。さらに拡張機能を実装するためのプラグインも豊富にあるため、開発の幅を広げることができるでしょう。

リクエストが1回で済むため効率的

webpackを導入することで、読み込み順を気にすることなく1回のリクエストで進むため、通信回数を減らすことができます。通信回数を減らせると言う事は、その分サーバーへの負担も少なくなり、開発効率を上げることができるのです。

ライブラリからサンプルを見つけやすい

webpackは、JavaScript以外にも様々なフレームワークで作業されています。例えばRuby on Railsなどの有名なフレームワークでもwebpackが標準で装備されており、ライブラリの中からサンプルを見つけやすいことが特徴です。

依存関係のあるJavaScriptのモジュールを解決できる

webpackを使うことで、依存関係のあるモジュールを解析して、1つのファイルにまとめてくれます。例えば複数のJavaScriptファイルを一つのJavaScriptファイルに、複数の画像ファイルを一つの画像ファイルにまとめるなど、ファイルの依存関係を解決することができます。

webpackの導入方法

ここからはwebpackの導入方法や、実際の使い方についてご紹介していきます。実際の開発現場で使えるよう、ぜひ覚えてみましょう。

webpackの導入準備

まずはwebpackを使う準備として、事前にNode.jsをインストールし、コマンドラインを使用できる準備を整えましょう。

まずは以下の手順で進めてみてください。

公式サイトからNode.jsをインストール
コマンドラインを起動 (macOS：「ターミナル」、Windows：「コマンドプロンプト」)

続いてはコマンドライン上での操作になります。

まずはコマンドラインを開き、ディレクトリを作成しましょう。下記のコマンドでディレクトリを作成します。

mkdir 任意のディレクトリ名

1	mkdir 任意のディレクトリ名

続いて作成したディレクトリに移動して、package.jsonを作成します。

Macでの移動

cd /Users/ディレクトリ名

1	cd /Users/ディレクトリ名

Windowsでの移動

cd C:¥Users¥ディレクトリ名

1	cd C:¥Users¥ディレクトリ名

移動するためにはそれぞれ、上記のコマンドを実行します。

package.jsonの作成

npm init -y

1	npm init -y

「package.json」の作成ができたら、npm経由でWebpackとwebpack-cliのインストールを行います。

npm i -D webpack webpack-cli

1	npm i -D webpack webpack-cli

webpackファイルの設定

webpackのインストールができたら、「webpack.config.js」に下記のコードを記述します。

const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

const path = require('path');

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist')

}

};

webpackの使い方

では実際にwebpackを使い、ファイルをまとめる方法についてご紹介していきます。

2つのファイルをまとめる

実行結果で、2つの言葉が合わさって表示されれば成功です。

//モジュール1とモジュール2をimportで呼び出す
import module1 from './modules/module1';
import module2 from './modules/module2';

//変数を定義
var language1 = "web";
var language2 = "katu";

//関数に変数を投入
var returnedLord1 = module1(language1);
var returnedLord2 = module2(language2);

//結果をまとめて表示
var addedWords = returnedLanguage1 + returnedLanguage2;
console.log(addedWords);

//モジュール1とモジュール2をimportで呼び出す

import module1 from './modules/module1';

import module2 from './modules/module2';

//変数を定義

var language1 = "web";

var language2 = "katu";

//関数に変数を投入

var returnedLord1 = module1(language1);

var returnedLord2 = module2(language2);

//結果をまとめて表示

var addedWords = returnedLanguage1 + returnedLanguage2;

console.log(addedWords);

“webkatu” と出力できれば成功です。

CSSファイルをまとめる

JavaScriptもそうですが、CSSファイルも記述量が多くなりやすいことが特徴です。そのためこちらでは、CSSファイルをまとめる方法についてご紹介します。

CSSファイルをまとめるには、css-loaderとstyle-loaderが必要です。まずはコマンドラインからnpmでインストールをしましょう。

$ npm install css-loader style-loader -D

1	$ npm install css-loader style-loader -D

インストールできたらwebpack.config.jsに下記のコマンドの通り追記します。

module: {
  rules: {
    {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            url: false,
          },
        },
      ],
    },
  },
}

module: {

rules: {

{

test: /\.css$/,

exclude: /node_modules/,

use: [

'style-loader',

{

loader: 'css-loader',

options: {

url: false,

}

追記できたらCSSファイルをインポートするために下記の通り記述します。

import 'style.css';

1	import 'style.css';

まとめ

この記事では「webpack」について、導入するメリットや使い方についてご紹介しましたが、いかがでしたでしょうか。

webpackはJavaScriptに限らず、Ruby on Railsでも標準化されているものです。フロントエンド開発においてとても重要な役割を果たすため、ぜひ習得をしてみましょう。

2021.02.23Web系エンジニアを目指す際に習得すべきプログラミング言語とは？

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。