【動かして理解】webpackの使い方【インストール〜カスタマイズ編】

記事内に商品プロモーションを含む場合があります

webpackって何だろう？
どう設定するのかな？
業務で何となく使っているけど、詳しいことは分からない。

このような疑問の解決記事です。

webpackがバンドルツール（複数ファイルをまとめるもの）であることは知っていたのですが、それ以外の知識が全くなく、インストールからカスタマイズ設定までをまとめました。

Node.jsが入っている前提で進めていくので、先にインストールしておいてください

Contents

webpackを使用するメリット
webpackのインストール方法
webpackを使ってみる
【カスタマイズ①】npm scriptで実行コマンドを変更する
1. [追記 2022-1-10] productionモード用コマンドも追加可能
【カスタマイズ②】バンドル参照ファイルや出力ファイル名を変更する
1. webpack.config.jsを作って設定変更
【カスタマイズ③】webpackのローカルサーバー環境を使用する
【カスタマイズ④】npm run watchで差分検知した際、バンドルする
まとめ
参考

webpackを使用するメリット

複数のJavaScriptファイルが存在する場合でも、読み込む記述を1文にまとめることができます（※まとめることを「バンドル」と言う）。

結果、表示速度が速くなります。

例えば以下のようなソースがあるとします。

<!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="index.js"></script>
    <script src="index2.js"></script>
    <script src="index3.js"></script>
    <script src="index4.js"></script>
    <script src="index5.js"></script>
    <script src="index6.js"></script>
    <script src="index7.js"></script>
</body>
</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="./bundle.js"></script>
</body>
</html>

   <!-- これが -->
    <script src="index.js"></script>
    <script src="index2.js"></script>
    <script src="index3.js"></script>
    <script src="index4.js"></script>
    <script src="index5.js"></script>
    <script src="index6.js"></script>
    <script src="index.js"></script>

    <!-- こうなる -->
    <script src="./bundle.js"></script>

webpackのインストール方法

公式のインストール方法として、webpack公式ドキュメントを記載しておきます。

インストール手順
https://webpack.js.org/guides/getting-started/

※DOCUMENTATION → footerにあるGetstarted

npmを初期化する

npmは「node package manager」の略で、Node.jsのパッケージ管理ツールのことです。

ターミナルを開いて、webpackをinstallしたいフォルダまで移動します。

例：webpack-turorialフォルダだったら、cd/webpack-turorial
フォルダがない場合は作成する。

下記コマンドを実行。

npm init

※インストール時に色々聞かれますが、全質問にyesなら、以下コマンドでOK

npm init -y

npm install後は、フォルダ内にpackage.jsonが生成されます。

<!--階層構造-->
webpack-tutorial
└package.json

//package.json
{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

webpackをインストール

npm install後、以下コマンドを実行します。

webpackとwebpack-cliをインストール

npm install webpack webpack-cli ―-save-dev

webpack-cliって？

webpackを動作させるためのパッケージのこと。これがなければwebpackを実行できない。

–save-devって？

本番環境か、開発環境用か。前者はpackage.jsonの”dependedcies”で後者は’devDependencies’に追加される。

【npm初心者】なんんとなく使っていた npm install の –save-dev ついて調べてみたhttps://zenn.dev/hrkmtsmt/articles/5f4a0e5c79b77a

【dependenciesとdevDependenciesの違い【package.json】
https://penpen-dev.com/blog/dependencies-devdependencies/

webpackとwebpack-cliをインストールすると、以下の階層構造になります。

webpack-tutorial
├node_modules
├package-lock.json
└package.json

package.jsonは、以下のように記述が追加されます。

“devDependencies”に”webpack”と”webpack-cli”があるのを確認。

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

これでwebpackのインストールが完了。

※webpackを使わない場合

webpackの使用メリットが分かるように、使用しない場合の実装も解説。

以下の3種類のファイルを用意します。

node_modules, package-lock.json, package.jsonはそのままで

webpack-tutorial
├index.html
└src 
　├index.js
　└sub.js

webpackを使わないと以下のような記述になる。
（※index.htmlが2つのjsを読み込んでいるのが分かる）

//sub.js

export function hello(text) {
    alert(text)
}

//index.js

import { hello } from './sub.js';
hello('hello world')

<!-- 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="./src/index.js" type="module"></script>
    <script src="./src/sub.js" type="module"></script>
</body>
</html>

VS CodeエディターのLive Serverなどを使用し、ローカルサーバーを立ててindex.htmlを実行すると、以下のようになります。

単にindex.htmlを開いても動作しないので、必ずローカルサーバーを立てる

※import や exportを使う場合、type=“module”と記載しないとエラーになるので注意。

Uncaught SyntaxError: Cannot use import statement outside a module 
Uncaught SyntaxError: Unexpected token 'export'

ブラウザで覚えるES Modules入門 JavaScriptでモジュールを使う時代

https://ics.media/entry/16511/

ここまでは、比較のために複数ファイルに分けてアラートメソッドを実行しました。

webpackを使ってみる

webpackインストール時の起動のコマンドは以下。

ターミナルでwebpack-tutorialフォルダにいる状態で実行

npx webpack

これでdistディレクトリが生成。
中にmain.jsが生成されています。

<!--階層構造-->
webpack-tutorial
└dist
|   └main.js
├node_modules
├src
|   ├index.js
|   └sub.js
├index.html
├package-lock.json
└package.json

main.jsを読み込ませれば、さっきのindex.js sub.js（アラートメソッド実行）が読み込まれていることになります。

<!-- 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="./dist/main.js"></script>
</body>
</html>

つまり、読み込むファイルが一つで済むようになったことに注目。これがwebpackの最大メリット。

webpackの導入〜実行はここまでです。次はカスタマイズ編。

【カスタマイズ①】npm scriptで実行コマンドを変更する

package.jsonの中にある下記記述を削除します。

//package.json

“scripts” {
“test”: “echo \"Error: no test specified\" && exit 1”
}

以下に書き換えましょう。

//package.json

“scripts” {
"build": "webpack"
}

これで、さっきはnpx webpackと打ちましたが、以下で実行（バンドル）できるようになります。

npm run build

なぜnpm scriptsを利用するのか？（なぜコマンドを変えるのか？）

webpack を利用してみる
https://is.gd/VcoCdr

実務の現場ではカスタマイズしていることが多い

[追記 2022-1-10] productionモード用コマンドも追加可能

以下のようにproductionモード用コマンドも追加できます。

//package.json

“scripts” {
  "build": "webpack",
  "build:prod": "webpack --mode production"
}

productionモードだと、出力ファイルは可読性が無視され、minifyされる
軽量化 > 可読性

【カスタマイズ②】バンドル参照ファイルや出力ファイル名を変更する

webpack.config.jsを作って設定変更

エントリーポイント、出力ファイル名を変更することも可能。
初回にnpx webpackで実行した際、webpackは以下のような動きをします。

①./src/index.jsを見て、バンドル。
（エントリーポイント → ここにimportの記述がある）

②dist/main.jsという名前でファイルを生成。

これら一連の流れを変えることができます。

フォルダ直下にwebpack.config.jsを作成します。

<!--階層構造-->
webpack-tutorial
└dist
|   └main.js
├node_modules
├src
|   ├index.js
|   └sub.js
├index.html
├package-lock.json
├package.json
└webpack.config.js

作成したwebpack.config.jsに下記記述を追加します。

//webpack.config.js

module.exports = {
    //エントリーポイント
    entry: './src/index.js',

    //ファイルの出力
    output: {
        //出力先のパス（__dirnameはwebpack-tutorialフォルダの階層）
        path: `${__dirname}/dist`,
        //出力ファイル名
        filename: 'bundle.js'
    },

    //モード 出力ファイルが見やすい（≠minify）　,　　デフォルトは'production'
    mode: 'development',
}

modeは次のいづれかを指定。development, production, none。

webpack を利用してみる
https://is.gd/HCPSru

これで再度以下のコマンドを実行してみると・・・

npm run build

以下のようなフォルダ構成になります。

<!--階層構造-->
webpack-tutorial
└dist
|   ├bundle.js
|   └main.js
├node_modules
├src
|   ├index.js
|   └sub.js
├index.html
├package-lock.json
├package.json
└webpack.config.js

出力ファイルがbundle.jsに変更されました。

つまり、index.htmlに読み込ませていたmain.jsをbundle.jsに変更する必要があります。（機能的には同じなのですが）

<!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="./dist/bundle.js"></script>
</body>
</html>

それから、index.htmlファイルの場所をdistフォルダ内に格納し、bundle.jsの参照先も変更しておきましょう。

<!--階層構造-->
webpack-tutorial
└dist
|   ├bundle.js
|   ├index.html <!-- ここに移動 -->
|   └main.js
├node_modules
├src
|   ├index.js
|   └sub.js
├package-lock.json
├package.json
└webpack.config.js

<!-- 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="./bundle.js"></script> <!--参照先を変更-->
</body>
</html>

「バンドル参照ファイル」と「出力ファイル名変更」のカスタマイズは、これでOK。

余談ですが、初期設定では、src/index.jsをエントリーポイントとして見にいくようになっています。

【カスタマイズ③】webpackのローカルサーバー環境を使用する

本記事では、VS CodeのLive Serverを使って、簡易サーバーを立てています。
しかし、npmパッケージで用意されているものを使うことも可能です。

以下のコマンドを実行します。

npm install --save-dev webpack-dev-server

package.jsonを確認します。

”webpack-dev-server”が追記されていれば、パッケージインストール成功

//package.json

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  }
}

インストールされただけだと、まだ使用することはできないので、さらにpackage.json, webpack.config.jsに以下を記述します。

“scripts”内に”start”: “webpack server”を追記

//package.json

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  }
}

devserverプロパティを追記

//webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'bundle.js'
    },
    mode: 'development',
    devServer: {
        //distを起動する
        static: "dist",
        //実行後に自動でブラウザを立ち上げる
        open: true
    }
}

これで設定完了。以下コマンドを実行すると・・・

npm run start

ローカルサーバーが立ち上がりました。
今回はwebpackのローカルサーバーなので、さっきとはURLが違うことが確認できます。

【カスタマイズ④】npm run watchで差分検知した際、バンドルする

jsファイルなどを変更して、差分検知した場合にバンドルするのがwatchです。

{
  "name": "webpack-tutorial2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack server",
    "watch": "webpack --watch" //追加
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  }
}

以下コマンドで、watchを起動できます。