Webpackとは何?メリットや導入方法・使い方を解説!

Webアプリケーション構築時に導入するツールには様々なものがありますが、モジュールバンドラーと呼ばれるものの中にWebpackというものはあります。Webpackとは何か、Webpackのメリットや導入方法/使い方とはどのようなものかを解説していきます。

Webpackとは何?メリットや導入方法・使い方を解説!のイメージ

目次

  1. 1Webpackとは
  2. モジュールバンドラーのこと
  3. Webpackのメリット/デメリット
  4. 2Webpackの使い方
  5. Webpackの導入方法
  6. Webpackファイルを設定する方法
  7. 2つのモジュールをバンドルする手順
  8. CSSファイルのバンドル
  9. その他の機能
  10. 最後に

Webpackとは

Webpack、Parcel、Rollupなど、モジュールバンドラーと呼ばれるものには様々なものがあります。

モジュールバンドラーのこと

Webアプリケーションの構築時などに利用されるものですが、その中でも高機能で軽く、利用者も右肩上がりに増えているモジュールバンドラーがWebpackです。

そもそもモジュールバンドラーとはどういうものなのかよく分からない、という人もいるかと思います。Webpackの説明の前に、モジュールバンドラーとはどういったものなのかを説明しておきます。

モジュールバンドラーとは

モジュールバンドラーとは、複数のモジュールを1つにまとめることができるツールを指します。使い方によってはまとめたファイルが複数になることもありますが、ざっくり説明するとそういったものです。

モジュールというのは機能ごとに分割/保存されたファイルで、プログラムの中のJavaScriptファイルやsassファイルのことをいいます。

複数あるJavaScriptファイルやsassファイルを1つのJavaScriptファイル、1つのsassファイルにまとめる(バンドルする)ものがモジュールバンドラーであるWebpackです。

Webpackのメリット/デメリット

Webpackの導入を検討している人がまず気にするのは、Webpackを導入する上でのメリットとデメリットとはどういったものかでしょう。

メリット

Webpackのメリットとはなにかから説明していきます。Webpackとは複数のモジュールを1つにまとめる使い方が可能なモジュールバンドラーということもあって、その分コードが読みやすくなります

標準仕様のES Modulesが使える、node_modulesのモジュールを結合できるなど、他のツールではできないことも可能なのもWebpackのメリットの1つです。

JavaScriptだけでなくCSSや画像などもまとめる使い方も可能ですので、Webpackとは開発者に管理しやすい環境を作りやすいものでもあります。

また、Webpack1つで設定ファイルが煩雑化しがちなのを防ぐことができますので、導入することでファイルを分担やテストの実行をしやすくすることが可能です。

なお、Webpackはファイル間の依存関係を解析した上でまとめてくれます。これがあることにより、JavaScriptやCSSの読み込み順序によってはエラーが生じてしまうケースを回避できるのです。

そのため、変なエラーが生じてしまったり、読み込みに時間がかかるのを防ぐことができ、利用するユーザー側もブラウザで読み込む時間を短くすることも可能です。

開発者だけでなく、利用するユーザーにも嬉しい点があるというのもWebpackのメリットと言えるでしょう。

デメリット

そんなWebpackにあるデメリットとはなにか気になる人もいるかと思います。Webpackはメリットのほうが多いのですが、利用上いくつかデメリットも存在しています。

まずはWebpackの設定が増えると急に難しくなるという点です。知識がないままやっていると逆にWebpackを利用しないほうができた、ということもある可能性があります。

また、手間な部分という点ではあるのですが、Webpackではファイルの変更をするたびにビルドが必要です。リリース時などに忘れがちなので、ビルドする癖をつけておいたほうがいいでしょう。

Webpackでは開発環境と本番の環境の設定をそれぞれ同時に行うことができます。とはいってもそれにはデメリットが有り、それが原因で開発環境用にも関わらず本番環境の設定でリリースしてしまう、というようなことも起きてしまうため注意が必要です。

最後に、Webpackでバンドルすると元ソースがない場合ソースがそのまま表示されないこともありデバックしづらい点です。このWebpackのデメリットはソースマップを出力する設定で回避はできますので、設定しておくことをおすすめします。

Webpackの使い方

では、モジュールバンドラーであるWebpackとはどのような使い方をするのか、導入方法なども含め説明していきます。

Webpackの導入方法

まずはWebpackを導入しましょう。Webpackの導入にはコマンドプロンプトなどを利用する必要がありますので、その点理解の上で進めてください。

Node.jsのインストール

まずは下記リンク先から「Node.js」をインストールしてください。

Node.js
推奨版をダウンロード

「推奨版」の方を導入しましょう。最新版だとバグなどが発生する可能性があるため、安定しているものを選択したい場合で最新版でなくても問題ないのであればこちらで十分です。

インストーラーを起動

ダウンロードしたインストーラーを起動します。

「Next」をクリック

インストーラーが起動しますので、「Next」をクリックしてください。

「I accept the terms in the License Agreement」にチェックを入れる

エンドユーザーライセンスへの同意画面になります。「I accept the terms in the License Agreement」にチェックを入れましょう。

「Next」をクリックする

「Next」で次に進みます。

そのままで「Next」をクリック

Node.jsのインストール場所が表示されます。そのままで問題ありませんので「Next」をクリックしましょう。

「Next」で次へ進む

インストールする対象とpathの設定が表示されます。ここもそのままで問題ありませんので「Next」をクリックしてください。

チェックは不要なので「Next」をクリック

ネイティブ拡張の開発に必要なツール類のインストールの可否を選択します。ビルドに必要なpythonなどのツール類をインストールする場合チェックが必要ですが、基本的にチェックしなくて大丈夫です。「Next」をクリックしてください。

インストールには管理者権限が必要

Node.jsのインストール確定画面になります。なお、Node.jsのインストールには管理者権限がいりますので、その点注意が必要です。

「Install」をクリック

「Install」をクリックすればインストールが実行されます。ユーザーアカウント制御画面が表示されたら「はい」を押せばOKです。

Node.jsのインストール完了

上記画面になればNode.jsのインストール完了です。

コマンドラインでWebpackを導入

Webpackの使い方の説明に移ります。まずはWebpackを導入しましょう。コマンドラインでの操作を行います。

Webpack用のフォルダを任意の場所・名前で作成

その前に、Webpackのコンテンツ一式を保存しておくフォルダを任意の場所に作成しておいてください。例として作成したのは下記フォルダで、以下の説明でもそちらを利用していきます。

C:¥webpacktest

Windowsの場合コマンドプロンプトを起動

Windowsの場合はコマンドプロンプトを、Macの場合はターミナルを起動してください。

作成したWebpackコンテンツ用のフォルダの場所を開く

ここからはコマンドプロンプトでの説明を主体にします。特記する場合以外、Macの場合も実行するコマンドは同じです。下記コマンドで、先ほど作成したフォルダの場所を開きます。(赤字は作成したフォルダに応じて変更してください。)

Windowsの場合 cd C:¥webpacktest
macOSの場合 cd /webpacktest

package.jsonファイルを生成

下記コマンドを入力・実行して、Webpackの利用に必要なpackage.jsonファイルを生成します。

npm init -y

package.jsonファイルの生成完了

上記のような表示がされれば生成完了です。

Webpack本体のインストール

次に、下記コマンドを入力してWebpack本体のインストールを行います。

npm install -D webpack webpack-cli

完了するのを待つ

Webpack本体のインストールには少し時間がかかります。完了するまで待ってください。

Webpack本体のインストール完了

上記画面になればWebpackの導入が完了となります。この時点で作成したWebpackのコンテンツを保存するフォルダの中身は下記のようになっています。

webpacktest
  │
  ├node_modules
  │ ├……
  │ ├……
  │
  ├package.json
  └package-lock.json

Webpackファイルを設定する方法

次にWebpackファイルを使うための設定をしましょう。メモ帳を開いてください。

「webpack.config.js」ファイルを作成

メモ帳などでWebpack設定ファイルである「webpack.config.js」ファイルを作成し、下記の内容を貼り付けてください。

const path = require('path');

module.exports = {
  mode: 'development',
  devtool: false,
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/js')
  }
};

Webpackコンテンツ用のフォルダに配置

「webpack.config.js」ファイルは最初に作成したWebpack用のフォルダ(今回の場合c:\webpacktest)に配置しましょう。前述したとおり、これはWebpackの設定ファイルです。これでWebpackファイルの設定が完了となります。

2つのモジュールをバンドルする手順

ここからはWebpackを利用して2つのモジュールをバンドルする場合の使い方の説明をしていきます。今回はWebpackで利用するディレクトリ構成が下記の状態だと仮定して、Webpackで2つのモジュールをバンドルする手順を説明していきます。

この時点で作成したほうがいいもの(フォルダ)は赤字で示しています。

webpacktest
  │
  ├node_modules
  │ ├……
  │ ├……
  ├package.json
  ├package-lock.json
  ├public
  │ ├index.html
  │ └js
  │  └bundle.js
  ├─src
  │ └js
  │  ├index.js
  │  └modules
  │    ├module01.js
  │    └module02.js
  └webpack.config.js

モジュールバンドラーであるWebpackでバンドルしたいモジュールは「modules01.js」と「module02.js」、エントリーポイントは「index.js」としました。

エントリーポイントのファイルの作成

まずはWebpackのエントリーポイントである「index.js」を下記のJavaScriptで作成・保存をしてください。

import module1 from './modules/module01';
import module2 from './modules/module02';

var text1 = "明日は";
var text2 = "晴れる";

var returnedText1 = module1(text1);
var returnedText2 = module2(text2);

var outputText = returnedText1 + returnedText2;

console.log(outputText);

src/jsフォルダに保存

srcフォルダの中のjsフォルダに保存してください。

1つ目のモジュールの作成

Webpackでバンドルするモジュールの定義も設定しておきましょう。メモ帳などで下記内容を記載し、「module01.js」で保存します。

export default function module1(text1) {
  return text1 + "きっと";
}

2つ目のモジュールの作成

同じくメモ帳などで下記の内容を貼り付けて、「module02.js」のファイル名で保存しておきましょう。

export default function module2(text2) {
  return text2 + "だろう。";
}

モジュールの保存場所

この2つのモジュールは、srcフォルダのjsフォルダの中に作った「modules」のフォルダに保存してください。

Webpackコマンド

作成した、Webpackでバンドルしたいモジュールを結合するためには下記のコマンドを利用します。

npx webpack

webpack.config.jsがある階層で実行

これがWebpackのコマンドを走らせるものです。webpack.config.jsがある階層(今回はWebpackのフォルダとして作成した「c:\webpacktest」)でこのWebpackコマンドをコマンドプロンプトで実行してください。
 

成功した場合の表示

上記のように表示されればWebpackコマンドが成功しています。

「bundle.js」のファイルが出力されているか確認

Webpackのフォルダの中の「public」フォルダの中にある「js」フォルダの中に「bundle.js」が作成されているかどうかを確認してください。

「bundle.js」を読み込むHTMLファイルを作成

次に、「bundle.js」をHTMLファイルで読み込んで内容を確認しましょう。メモ帳などで下記の内容で「index.html」のファイルを作成してください。

<html>
<head>
<body>
  <p>テストページ</p>
  <script type="text/javascript" src="js\bundle.js"></script>
</body>
</head>
</html>

publicフォルダの中に配置

作成したHTMLファイルはpublicフォルダの中に配置しましょう。

ドラッグアンドドロップでhtmlファイルをブラウザで読み込ませる

作成したHTMLファイルをブラウザで読み込んでください。今回はGoogle Chromeを利用します。HTMLファイルはドラッグアンドドロップで読み込み可能です。

ブラウザで読み込んだ際の表示

上記のように表示されます。スクリプトで結合した内容はデベロッパーツールを利用して確認します。

デベロッパーツールを起動

Chromeのメニューで「その他ツール」の「デベロッパーツール」で確認しましょう。

「Console」をクリック

「Console」をクリックしてください。

スクリプトで設定した内容に結合できていればOK

Webpackで結合したかった2つのモジュール(スクリプト)が結合された結果が出ていればOKです。

CSSファイルのバンドル

CSSをバンドルするためのローダーをインストール

なお、WebpackでCSSをバンドルしたい場合はローダーが必要です。コマンドプロンプトなどで下記コマンドを入力して、Webpackで利用するための「style-loader」と「css-loader」をインストールします。

npm install css-loader style-loader -D

webpack.config.jsファイルに追記

CSSファイルのバンドルをするためのWebpackの設定も必要です。webpack.config.jsファイルを開き、一番後ろに下記の内容を追記(貼り付け)してください。

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
               options: {
                 url: false,
               }
             },
           ],
         },
      ]
   }
};

その他の機能

なお、Webpackにはその他にも様々な機能があります。その中でもローダーとは何か、プラグインとはなにかという点を紹介します。

ローダー

前述したCSSのバンドルでもちらりと触れましたが、JavaScript以外のファイルを利用するために必要なものです。imageやCSS等といったファイルを変換する使い方やバンドルする前に働きかけてより便利な使い方ができるようにできます。

CSSのバンドルには上記で説明したものを利用しますが、もう1つ便利なローダーがあります。それがBabelというものです。

JavaScriptの標準と定められているES(ECMASCript)がありますが、このES6をES5に変換することができるものがBabelなのです。

Babelの使い方もCSSのローダーのとき同様、ローダーをインストールしてwebpack.config.jsにBabelの設定を追加することをおこないます。

Babelのローダーのインストール

Babelのローダーのインストールは下記コマンドを実行してください。

npm install babel-loader @babel/core @babel/preset-env --save-dev

webpack.config.jsに追記する

また、Webpackの設定ファイルには下記の内容(※赤字部分)を追記してください。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [['@babel/preset-env', { modules: false }]]
            }
          }
        ]
      }
    ]
  },

};

プラグイン

Webpackをより便利な使い方ができるようにできるものにプラグインもあります。プラグインはWebpackでのビルド実行時に実行されるもので、ローダーとは少し異なるものです。

プラグインもWebpackにインストールして、webpack.config.jsにプラグインの設定を追記することで利用することができます。Webpackでの設定方法は割愛します。便利なプラグインには次のものがありますので、参考にしてみてください。

プラグイン 内容
IgnorePlugin 正規表現に引っかかるモジュールの作成をしないようにすることができる
ProvidePlugin Webpackで利用したいモジュールのすべてのファイルを変数として扱うことができる
UglifyJsPlugin 不要なコメントやスペースを削除して、ファイルを圧縮/軽量化することができる

最後に

Webpackは、複数のモジュールをバンドルすることで煩雑なファイルをまとめることができ、開発者に管理しやすい環境を作ることが可能なツールです。

ローダーやプラグインを利用することでより便利に使うことができますので、基本的な部分から少しずつWebpackを使ってみてください。

ThumbChromeデベロッパーツールの機能と使い方【初心者向け】
Chromeというブラウザには、デベロッパーツールというGoogleが提供しているツールが存...
ThumbProgateとドットインストールを比較!どちらにすべき?
皆さんProgateとドットインストールのそれぞれの特徴や利点、レッスン機能や月額料金、コー...
Thumb「Progate」の無料会員でどのレベルまでいけるか解説!
Progateを無料会員では、どのレッスンのレベルまで学べるのかについて説明をしていきたいと...

関連するまとめ

関連するキーワード

Original
この記事のライター
八千草 蛍
分かりやすく気軽に読める記事を書いてまいりたいと思います。よろしくお願いいたします。