javascriptでアプリを作っているとどうしてもファイルが多くなってしまいます。
そのまま作っているとそのファイルが必要としている別のファイル
（これを依存している状態という）が多くなり、index.htmlに
書き込んでいる内にややこしくなってしまいがちです。
例えば、barに依存したプログラムを組んでみると
</pre> import bar from './bar'; bar(); <pre>
</pre>
export default function bar() {
//
}
<pre>
</pre> この例 <!doctype html> <html> <head> ... </head> <body> ... <script src="src/app.js"></script> <script src="src/bar.js"></script> </body> </html> <pre>
これだとbarの依存関係にあるapp.jsが先に読み込まれており、
app.jsの中のbarとは何ぞやと言われエラーを引きおこします。
更にここから色々継ぎ足していくとなると、どのファイルが
どのファイルに依存しているのか訳が分からなくなること
うけ合いです。
小さなプログラムだとまだ見やすいのですが、これが複数の機能を
持ったアプリとなると依存関係を次々と入れなければいけなくなり
どこに何の依存関係があったか分かりにくくなる・依存関係の読み込みエラーが
多発するといった不具合が起きてしまいます。
そこで今回のお題であるwebpackのbundleを使うことで、index.html
に本体のソースを書かなくて済むように
なり、複雑な依存問題を解決させることができるようになります。
慣れてくればwebpackで用意されているプラグインを使って
bundleされたコードの不用なコードを削除したり圧縮できたりするので
これからwebpackを使うプロジェクトを作る際は絶対に覚えておきたいところです。
例としてはこんな感じ↓
</pre>
//webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
<pre>
</pre> //bundleしたscriptを読み込む <!doctype html> <html> <head> ... </head> <body> ... <script src="dist/bundle.js"></script> </body> </html> <pre>
まとめ
・bundleとは、複数のjavascriptファイルをまとめ上げる束のようなもの
・現在のフロントエンド開発にはbundleは必須
・依存関係による複雑なscript定義を解決してくれる
今日の今までbundleはなんのために使われるか・使うとどんな効果が
得られるのかをあやふやにしてきたので、このアウトプットの際に
自分で確認しながら理解するのはいい機会かなと思い書いてみました。
最初はあぁそんなんか―程度で留めておいてもいいかなと思います。
