webpack を使用して、javascript ファイルをバンドル化します。
Contents
webpack
webpack は javascript モジュールをまとめ、コンパイルすることができるモジュールバンドラーです。
導入
npm でインストールします。
|
1 2 |
$ npm install --save-dev webpack $ npm install --save-dev webpack-cli |
設定
webpack.config.js を作成してタスクを設定します。
index.js にバンドルするファイルを設定し、watch を有効にして、ファイルに変更があれば自動で更新するように設定します。さらに watch オプションで、変更時に連続で実行されないよう少し間を置いてまとめて更新がかかるようにし、ポーリングも設定しておきます。
a.js b.js c.js をモジュール化して、バンドルします。
mode は production にすると uglify を行います、 development にすることで圧縮する前に状態で出力されます。今回は development にしていますので、devtool でソースマップも出力するようにします。
|
1 2 3 |
const A = require('./a.js'); const B = require('./b.js'); const C = require('./c.js'); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const path = require('path'); module.exports = { mode: 'development', devtool: 'inline-source-map', entry: './src/index.js', output: { filename: 'app.js', path: path.resolve(__dirname, 'js') }, watch: false, watchOptions: { aggregateTimeout: 300, poll: 1000 } }; |
実行
webpackを実行します。
|
1 |
$ webpack |
処理用として設定した test タスクを実行します。
まとめ
今回は、index.js にバンドルするファイルを指定し、watch は webpack.config.js で設定しました。
gulp などのタスクランナーもありますが、webpack のみでバンドル化を行うことで、使用するツールをシンプルにすることができます。機能は webpack ほどありませんが、Parcel などシンプルなモジュールバンドラーもあります。
参考
公式：webpack