受託でWebpack使ったので備忘録込みのさらっとまとめ
- Webpackとは
- Webpackのメリット
- Webpackの基本的な役割
- 参考文献
- おわりに
Webpackとはウェブコンテンツを構成するファイル(jsとかsassとか)をまとめてしまうツールのこと。Webpackを使うことで、複数のjsファイルをひとつのjsファイルにまとめたり、複数のsassファイルをひとつのsassファイルにしたりできる
複数のJS、CSS、画像ファイルなどを１つにまとめることによって通信の際にファイル取得時間を短縮できる
Webpackには豊富なプラグインが用意されており、出力ファイルの圧縮やファイルでのエラーのスキップなど様々な期待される用途によって出力を分けることができる。
同じソースコードからwebブラウザで動く用のjsファイルとnodeサーバーで動く用のjsファイルなど、使用する環境に応じて異なった出力をすることができる。 これにより一つのサービスを複数の環境で提供することを容易になる。
コードが読みやすくなる、保守性が高くなるなど...
Webpackは自分で書いたJSとライブラリとして読み込んでいるJSを一つのJSファイルにまとめてくれ、またJSライブラリで読み込む必要があるCSSファイルたちもJSにまとめてくれる。かつそれらのCSSで読み込む画像ファイルもJSファイルにまとめてくれるので、JS/CSS/画像ファイルを一つのJSファイルにまとめてくれる。すごい
https://webpack.js.org/
https://github.com/webpack/webpack/
https://goworkship.com/magazine/how-to-webpack/
https://qiita.com/Shagamii/items/698a67bab0cd5eefcb4f
https://qiita.com/kamykn/items/45fb4690ace32216ca25
実際の現場だとセットアップ全部済んだ状態で使うこと多いから、個人開発で取り入れるのあり