webpack 2 入門: bundle の仕組み

公式チュートリアルをベースに bundle の仕組みを確認します。

Getting Started

% $(yarn bin)/webpack -v
2.6.1

チュートリアルに必要な準備を済ませます。

% mkdir sandbox-webpack
% cd sandbox-webpack
% yarn init -y
% yarn add --dev webpack
% yarn add lodash

Contents

外部ライブラリを読み込んで bundle する

yarn 管理されている外部ライブラリを import します。

app/index.js

import _ from 'lodash';
function component () {
  var element = document.createElement('div');
  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  return element;
}
document.body.appendChild(component());

HTML は bundle された JavaScript を読み込むようにします。

index.html

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

コマンドラインから webpack で bundle します。

% $(yarn bin)/webpack app/index.js dist/bundle.js
Hash: f29835791fbfdf477f76
Version: webpack 2.6.1
Time: 1004ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] ./app/index.js 268 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]

Config ファイルを用意する

webpack.config.js という Config を用意します。

webpack.config.js

var path = require('path');
module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

すると、これが

% $(yarn bin)/webpack app/index.js dist/bundle.js

こうなります。

% $(yarn bin)/webpack --config webpack.config.js

設定が増えてもこれで安心です。
--config オプションはなしでも OK です。

npm scripts を用意する

さらに bundle 用の npm scripts を用意します。
下記を追加します。

package.json

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

すると、これが

% $(yarn bin)/webpack --config webpack.config.js

こうなります。

% yarn run build
yarn run v0.24.6
$ webpack
Hash: f29835791fbfdf477f76
Version: webpack 2.6.1
Time: 487ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] ./app/index.js 268 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
✨  Done in 1.39s.

複数ファイルの entry と output

外部パッケージとプロジェクトの JavaScript のファイルを分割します。

Entry Points
Output

設定はこのように。

webpack.config.js

var path = require('path');
module.exports = {
  entry: {
    app: ['./app/index.js', './app/console.js'],
    vendors: './app/vendors.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

JavaScript を用意します。

app/index.js

function component () {
  var element = document.createElement('div');
  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  return element;
}
document.body.appendChild(component());

app/console.js

console.log('Hello, console!');

app/vendors.js

import _ from 'lodash';

HTML を修正します。

index.html

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
    <script src="dist/vendors.js"></script>
    <script src="dist/app.js"></script>
  </body>
</html>

実行します。

% yarn run build
yarn run v0.24.6
$ webpack
Hash: a5236f38cb52dc0ff012
Version: webpack 2.6.1
Time: 512ms
     Asset     Size  Chunks                    Chunk Names
vendors.js   544 kB       0  [emitted]  [big]  vendors
    app.js  3.14 kB       1  [emitted]         app
   [0] ./app/console.js 32 bytes {1} [built]
   [1] ./app/index.js 243 bytes {1} [built]
   [2] ./~/lodash/lodash.js 540 kB {0} [built]
   [3] ./app/vendors.js 24 bytes {0} [built]
   [4] (webpack)/buildin/global.js 509 bytes {0} [built]
   [5] (webpack)/buildin/module.js 517 bytes {0} [built]
   [6] multi ./app/index.js ./app/console.js 40 bytes {1} [built]
✨  Done in 1.40s.

以上でプロジェクト向けの bundle が実現できそうです。

DriftwoodJP/sandbox-webpack at 995d37f53b4dc88def8a8dec71c8e5a65beade55