webpackとは

webpack(ウェブパック)は、複数のJSファイルをまとめてくれるツールです。
webpackは「gulp」「Grunt 」「Browserify」のようなタスクランナーですが、最大の特徴は「モジュールバンドラ」です。

モジュールバンドラーはファイルをまとめることを指し、複数のモジュール（ここではJS）の依存関係を解決します。

今回は下記を参考にて webpack4 を npm で構築してみました。

参考

最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ

webpack の特徴

webpackのメリットはいくつかあります。

• 複数のJSファイルを1つのファイル（main.js や bundle.js）にまとめる
• HTTPリクエストの数を減らす
• 設定ファイルに基づいて開発環境を統一できる
• 「React」「Vue.js」をはじめとしたサードパティの JavaScript と連携して開発できる
• CSSやリソース（画像など）もバンドルできる

 

など、今まで別々で管理していたJSファイルを1つにまとめることで、フロントエンド開発手法そのものが変わってきます。

gulp で開発してきた場合は、gulp + webpack で運用してるようですが、新規ならば webpack で十分みたいです（開発者の好みか？）。

Node.js の確認

node.js のバージョンは13以上

$ node -v
v13.6.0

プロジェクト作成

webpack のテストサンプルを利用するロジェクトを作成する。
また、npm init で package.json も作成しておく。

$ mkdir webpack-test
$ cd webpack-test
$ npm init -y
$ mkdir src

webpack のインストール

devDependencies（-D） で webpack webpack-cli をインストールする

$npm i -D webpack webpack-cli
...
+ webpack-cli@3.3.11
+ webpack@4.41.6
...

JavaScript をモジュールで実装

現時点で、「モジュール方式」で JavaScript を実装することが推奨されている。
※ECMAScript Modules（ES Modules、ESM）

webpack4 では明示的に指定しない場合、以下の設定となります。

• 「src/index.js」がエントリーポイント
• 「dist/main.js」が出力ファイル

JavaScript ファイル記述

src/index.js

import { say } from "./module1";
say();

src/person.js

export function say() {
    alert("module1 hello!");
}

webpackビルド

手っ取り早く npm 5.2.0 で追加された「npx」コマンドで webpack ビルドしてみる。
（npm run build で webpack を動作させた方が応用が効くが） 

$ npx webpack
Hash: 58e8f21bff04a84f6d5c
Version: webpack 4.41.6
Time: 247ms
Built at: 2020/02/27 20:49:44
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 96 bytes {0} [built]
    | ./src/index.js 42 bytes [built]
    | ./src/person.js 54 bytes [built]

src/index.js に src/person.js が統合され dist/main.js が書き出される

HTML実装＆確認

index.html を作成し「dist/main.js」を読み込む

npm でビルド

npx webpack でなく package.json を設定して npm ビルドする

package.json の設定

• scripts の build に「webpack」
• devDependencies に 「webpack」「webpack-cli」のパッケージを記述

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "scripts": {
    "build": "webpack"
  }
}

npm ビルド

npm run build で webpack ビルドされる

$ npm run build
> webpack-test@1.0.0 build /Users/yoo/docker/projects/webpack-test
> webpack
...

webpack.config.js を設定してビルド

webpack.config.js を作成して、「entry」「output」を設定することで、エントリポイント、出力先ファイルをカスタマイズできます。

※前述の通り webpack4 では「src/index.js」「dist/main.js」がデフォルト

module.exports = {
  entry: `./src/index.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: "main.js"
  },
  mode: "development"
};

$ npm run build 

modeを「development」にすると、出力ファイル（main.js）が圧縮されずに書き出されます。

ウォッチを利用するビルド

webpack-dev-server をして、JavaScriptの実装をリアルタイムにブラウザ確認することもできるが、一般的なウォッチを利用してビルドする。

package.json に watch を設定

  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },

watch を起動

$ npm run watch

これで、JavaScript を保存すると自動でビルドされます。