[webpack] webpack 2 入門: bundle の仕組み

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

[markdown]
> * [Getting Started](https://webpack.js.org/guides/get-started/)

“`prettyprinted
% $(yarn bin)/webpack -v
2.6.1
“`

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

“`prettyprinted
% mkdir sandbox-webpack
% cd sandbox-webpack
% yarn init -y
% yarn add –dev webpack
% yarn add lodash
“`

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

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

“`javascript: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 を読み込むようにします。

“`html:index.html








“`

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

“`prettyprinted
% $(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 を用意します。

“`javascript:webpack.config.js
var path = require(‘path’);
module.exports = {
entry: ‘./app/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
}
};
“`

すると、これが

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

こうなります。

“`prettyprinted
% $(yarn bin)/webpack –config webpack.config.js
“`

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

## npm scripts を用意する

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

“`prettyprinted:package.json
“scripts”: {
“build”: “webpack”
},
“`

すると、これが

“`prettyprinted
% $(yarn bin)/webpack –config webpack.config.js
“`

こうなります。

“`prettyprinted
% 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](https://webpack.js.org/concepts/entry-points/)
> * [Output](https://webpack.js.org/concepts/output/)

設定はこのように。

“`javascript: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 を用意します。

“`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());
“`

“`javascript:app/console.js
console.log(‘Hello, console!’);
“`

“`javascript:app/vendors.js
import _ from ‘lodash’;
“`

HTML を修正します。

“`html:index.html









“`

実行します。

“`prettyprinted
% 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](https://github.com/DriftwoodJP/sandbox-webpack/tree/995d37f53b4dc88def8a8dec71c8e5a65beade55)
[/markdown]