77
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

webpackとは?

概要

webpackとは、モジュールバンドラ。
モジュールバンドラとは、
複数のファイルを1つにまとめて出力してくれるツールのこと。
(複数ファイルをまとめることを「バンドル」と呼ぶ)

主にjsをバンドルする役割が多いみたいだが、
CSSや画像などもバンドルできるらしい。

また、SASSの変換など、
コンパイル機能もあるらしいが、
主な用途としてはバンドル。

なぜ使うのか

大きな利点としては、2つ。

開発効率アップ

機能ごとにファイルを分けて開発をすることによって、
コードが整理されて開発効率、保守性が上がります。

システムの性能アップ

たくさんのjsファイルを1ページで読み込もうとすると、
リクエストがその数だけ発生し、
時間がかかってしまいます。

1つのファイルにまとめることで、
リクエストも1回だけにし、
性能を高めることができます。

そのほかにもいろいろ利点があるが、割愛。

使い方

必要なファイル

・バンドル対象のファイル
・エントリーポイントファイル
・webpack設定ファイル

このそれぞれを作っていきます。

バンドル対象ファイル

このような2つのjsファイルがあり、
それを1つのファイルにまとめたいとする。

sample1.js
module.exports.sample1 = function() {
        alert("sample1.jsです。");
}
sample2.js
module.exports.sample2 = function() {
        alert("sample2.jsです。");
}

エントリーポイントファイル

先ほどの2つのファイルのまとめ役となる
エントリーポイントファイルを作成します。

app.js
//まとめたいファイルをインポート
var sample1 = require(./sample1.js);
var sample2 = require(./sample2.js);

//インポートしたファイルの関数を実行できる
sample1.sample1();
sample2.sample2();

モジュールを読み込む方法として
requireとかimportがあるが、
その違いについてはこちらの記事で解説している。
jsのimportとrequireの違い

設定ファイル

次に、webpackの設定ファイルを作ります。

webpack.config.js
module.exports = {
        entry: "./app.js",
        output: {
                path: "./",
                filename: "bundle.js"
        }
}

entryにエントリーポイントファイルを書いて、
outputに、バンドルされたファイル名と出力先パスを書くだけです。

実際にはもっといろいろ設定できる項目があります。

webpack実行

ここまでできたらあとは
コマンド webpack を実行するだけです。

すると、
バンドルされた状態のbundle.jsが出力されます。

htmlファイルの<script>タグでそのファイルを読み込めば、
バンドルした各ファイルの機能を利用できます。

もう少し詳しい機能

モード

設定ファイルにはmodeという項目がある。
developproductionnoneに設定可能。

これをproductionにすると
圧縮されたファイルが出力される。

ローダー、プラグイン

違いはよく分からないが、
webpackにいろいろ便利な追加機能を入れることができる。

ES5のコードに変換してくれるbabelやeslintなど。
npmでインストールしたうえで、
webpack.config.jsに設定を書くと、
その機能を実行してくれる。

参考

https://qiita.com/uchiko/items/9972cfe9341df7ba4a8d
https://qiita.com/bakira/items/3c4e2d10aae085767817
https://qiita.com/kamykn/items/45fb4690ace32216ca25
https://goworkship.com/magazine/how-to-webpack/
https://qiita.com/soarflat/items/28bf799f7e0335b68186

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
77
Help us understand the problem. What are the problem?