webpackとは
様々なファイルをまとめるモジュールバンドラー。
jsを機能単位でモジュール化したものをまとめたり、画像やCSSもjsのファイルとして一つにまとめたりできる。
単純にリクエストの回数をへらす。モジュール形式のjsに未対応なブラウザでも実行されるような形に変換できるなどのメリット。
環境の構築
node.jsが存在する前提。
プロジェクトフォルダに移動。フォルダの場所、名前などは任意。
$ cd /Users/MyName/myprojectpackage.jsonファイル生成
$ npm init -ywebpackのインストール
npm i -D webpack webpack-cli実際の作業
サンプルファイル作成
まずこんな感じで自分で用意。
プロジェクトフォルダ
dist
index.html
src
main.js
sub.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
テスト
</body>
</html>// importでsub.jsを読み込み
import { myAlert } from "./sub";
// sub.jsに定義された関数を実行
myAlert();// export文を使ってhello関数を定義
export function myAlert() {
alert("sub.jsに書かれたmyAlertが実行されてこれを表示");
}ビルド
用意した各ファイルをビルドしてまとめる。
$ npx webpack結果こうなる
プロジェクトフォルダ
dist
index.html
main.js（srcのjsファイルを結合して生成されたファイル）
src
main.js
sub.js
(()=>{"use strict";alert("sub.jsに書かれたmyAlertが実行されてこれを表示")})();dist/index.htmlを開くと、sub.jsで定義した関数が実行されて、アラートが表示される。
package.jsonのカスタマイズ
npmのscriptsとしてwebpackのコマンドを登録
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //←この行を追加
},
"devDependencies": {
"webpack": "^5.18.0",
"webpack-cli": "^4.4.0"
}
}すると以下のコマンドでビルドできる。
$ npm run buildカスタマイズ
webpack.config.jsを用意して設定を明示することで、エントリーポイント（ビルドする際の起点となるjsファイル）のや書き出しフォルダなどがカスタマイズできる。
何も指定しない（webpack.config.js自体作らない）場合デフォルト値としてエントリーポイントがsrc/index.js、書き出し不フォルダがdistとなる。
