最近Webpackを触ってみたので、参照した記事のまとめ。
Vueなどのフロントエンドのフレームワークを何か使うとき、Webpackの名前は聞くことがあると思います。Webpackはざっくりいうと複数のJsファイルを一まとめにするツールです。VueだとVue-CLIの裏で動いていたりします。
【webpack(vue-cli)は何をしてくれるものなのか】
https://scrapbox.io/vue-yawaraka/webpack(vue-cli)%E3%81%AF%E4%BD%95%E3%82%92%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B%E3%82%82%E3%81%AE%E3%81%AA%E3%81%AE%E3%81%8B
webpackが広がった背景として、Javascriptで様々なライブラリが出ていてnpmを通してそれを使うケースが増えていること、またJavaScriptもバージョンによって機能がことなる、かつTypescriptも使われてきてて、トランスパイルが必要なケースが増えているから、といったものが挙げられると思います。
【[JS]Babelとwebpackを使いES6用のスクリプトを古いブラウザに対応させる】
https://php-archive.net/javascript/es6-babel-webpack/
webpackのインストール手順や、ビルドを設定するサンプルは以下の記事にまとめられています。この例では、自作した複数のJsを一つのファイルにまとめるような感じになってます。
【webpack 4 入門】
https://qiita.com/soarflat/items/28bf799f7e0335b68186
では次に、Typescriptで外部のJsライブラリを取り込んでビルドしたい場合、どうしたらよいか。下記の記事にある通り、まずTypescriptをビルドするためにloaderのインストールが必要です。また、jsファイルを取り込む為にresolveの設定が必要になります。
【[webpackレシピ] その1: TypeScriptに対応する】
https://sansaisoba.qrunch.io/entries/EWHkWZ9N3MSmNTVC
その他、webpackには環境毎にconfigファイル分けるなど色々な設定ができて、けっこう奥深いなと思いました。
