webpackの最小構成を試す - プログラマの森（仮）

webpackとは？

複数ファイルに分けて管理しているjs（モジュール）を一つのファイルにまとめてくれるツール（モジュールバンドラー）です。
（正確には1つのファイルとは限りませんが、役割に応じてファイルをまとめられます）

以下のように、lodash.jsとindex.jsの2つのファイルをロードしているHTMLがあるとします。

<script src="https://unpkg.com/lodash@4.16.6"></script>
<script src="index.js"></script>

webpackを使用すると、上記2つのjsを1つにまとめたmain.js（名前は任意）を作成してくれます。

<script src="https://unpkg.com/lodash@4.16.6"></script>
<script src="index.js"></script>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<script src="main.js"></script>

2ファイル程度ではあまり恩恵を感じませんが、ソースコードが非常に長くなってきた時にファイル単位で処理を分割するとどんどんファイルが増えます。そういった時にパフォーマンス面等でファイル数が問題にならなくなるので、管理することに集中しやすくなって便利です。

また、新しく作成されたファイルのことをバンドルファイル(bundle:束の意)と言ったりします。こういった言葉と実際の意味をちゃんと繋げておくことも他人のソースを読んだりAPIリファレンスを読む際に必要になります。

以下では実際に手を動かし、上記と同じことを実施します。

webpackを使ってファイルをまとめてみる（バンドルしてみる）

公式サイトを参考にしています。

また、以下がインストールされていることを前提に記述しています。
・node.js
・npm

以下は手順の概要です。

必要なモジュールをインストールする
- webpack
- webpack-cli
- lodash
package.jsonを書き換える
必要なファイルを手動で作成する
- ./webpack.config.js
- ./dist/index.html
- ./src/index.js
webpackのコマンドでlodashとindex.jsをまとめた（バンドルした）main.jsを作成する
確認する

1. 必要なモジュールをインストールする

任意のディレクトリで、以下のコマンドを続けて実行します。

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
npm install --save lodash

上記を実行すると、以下のファイルやディレクトリ等が作成されます。

│  package.json
│
└─node_modules
  ├─lodash
  ├─webpack
  ├─webpack-cli
  └─etc...

package.jsonの内容です。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "webpack": "^4.29.6",
  "webpack-cli": "^3.3.0"
  },
  "dependencies": {
  "lodash": "^4.17.11"
  }
}

2. package.jsonを書き換える

以下のように書き換えます。

- "main": "index.js",
+ "private": true,
+ "build": "webpack",

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
  "build": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "webpack": "^4.29.6",
  "webpack-cli": "^3.3.0"
  },
  "dependencies": {
  "lodash": "^4.17.11"
  }
}

3. 必要なファイルを手動で作成する

続いて、手動で以下のファイルを作成します * ./webpack.config.js * ./dist/index.html * ./src/index.js

./webpack.config.jsの内容

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
  filename: 'main.js',
  path: path.resolve(__dirname, 'dist')
  }
};

./dist/index.htmlの内容
読み込むjsファイルはindex.jsではなく、バンドルファイルとなるmain.jsを指定します

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

./src/index.jsの内容
importでlodashを指定します。

import _ from 'lodash';

function component() {
  let element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}
    
document.body.appendChild(component());

以下のディレクトリ構造になります。

│  package.json
│  webpack.config.js
│
├─dist
│   index.html
│
├─node_modules
│  ├─lodash
│  ├─webpack
│  ├─webpack-cli
│  └─etc...
└─src
    index.js

4. webpackのコマンドでlodashとindex.jsをまとめた（バンドルした）main.jsを作成する

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

npm run build

上記コマンドは、package.jsonにてbuildコマンドに対してwebpackを指定しているため、以下のコマンドと同等になります。

npx webpack

ここまで実行すると、./dist/main.jsが自動で作成されます。以下のディレクトリ構造になっています。

│  package.json
│  webpack.config.js
│
├─dist
│   index.html
│   main.js
│
├─node_modules
│  ├─lodash
│  ├─webpack
│  ├─webpack-cli
│  └─etc...
└─src
    index.js

5. 確認する

./dist/main.jsを開くと、ソースが圧縮されています。
index.jsと、index.jsからインポートしたlodashが圧縮して記述されています。また、index.htmlを開くと、「Hello webpack」と表示されることがわかります。

参考

公式サイト