Help us understand the problem. What is going on with this article?

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があるみたいだが、
その違い、仕組み、使い分けは要確認。

設定ファイル

次に、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

minato-naka
アジアクエスト株式会社(福岡オフィス) PHP/Laravel/AWS/Vue.js/Docker
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした