webpack

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

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

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

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

 

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

 

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を起動できます。

npm run watch

 

起動している間でファイルを編集すると、コマンド入力しなくても勝手にバンドルしてくれます。

webpack serverを立ち上げるとファイル変更時にリロードが必要。
watchの場合はブラウザを立ち上げない場合に使用する。

 

 

まとめ

本記事では、webpackの使い方について解説しました。

  • webpackを使用するメリット
  • webpackのインストール方法
  • webpackを使ってみる
  • 【カスタマイズ①】npm scriptで実行コマンドを変更する
  • 【カスタマイズ②】バンドル参照ファイルや出力ファイル名を変更する
  • 【カスタマイズ③】webpackのローカルサーバー環境を使用する
  • 【カスタマイズ④】npm run watchで差分検知した際、バンドルする

これまでは何となく使っていた場合でも、コマンドの意味が分かったかと思います。理解の一助となれば幸いです。

 

参考

下記動画を元に解説しました。大変参考になりました。

【webpack入門】Webアプリ開発を高速・快適にするバンドラwebpackの使い方!
https://www.youtube.com/watch?v=CV0mTZNoLXQ

ABOUT ME
ゆう
エンジニア歴6年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト運用担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。分かりやすく伝えることに課題意識を持ってます。