こんにちは。
銀座の見習いエンジニアのやまそうです。
プログラミングを勉強し始めた当初からRubyを勉強していたのですが、フロントエンドエンジニアを目指すべく最近はフロントエンド界隈の勉強をしています。
最近webpackの設定をゴリゴリ書く機会がありまして、そのときにbabelとかなんとかloaderとか色々使ったのでそれぞれが何をしているのか書いていこうかなーと思いました。
今後webpack.config.jsを見返したときにこいつなにしてるんだっけ？？ってならないように書いておきます。ある程度webpackを触ったことある方向けです。
これを見てそういえばこいつこんなことしてるんだったーーって思い出せればいいかなと思っています。
なのでそれぞれの詳しいことは記述しておりません。本音を言うとまだ深いところまでは理解していません。
こちらの記事のほうがよっぽどわかりやすく解説されています。
https://qiita.com/terrierscript/items/0574ab1ef358fecb55b9
今回私が使ったもの（プラグインやらライブラリのことですがめんどくさいの今後ツールと呼びます）ですが割とよく使われるかと思いますので誰かのお役に立てれば幸いでございます。
ちなみに今回使ったツールリスト（順不同）
- @babel/core @babel/preset-env babel-loader
- vue-loader
- css-loader
- sass-loader
- glob
- mini-css-extract-plugin
- webpack-manifest-plugin
@babel/core @babel/preset-env babel-loader
なんで3つまとめてるかというと基本的にこれらセットで使う。
babelさんたちは、JavaScriptの新しい記法を昔の記法とかに直して（コンパイル）してくれる。
例えばES6の記法はIEブラウザとかでは動作しない。でも開発のときはES6の開発のしやすさの恩恵を受けたいなというときに便利。
babel-loaderや@babel/coreではIEなどで使用できないPromiseなどの一部のものはどうにもしてくれない。@babel/preset-envを入れて少し設定を記述してあげると補完してくれるらしい。ちなみに前のバージョンではPolyfillを使用する。
vue-loader
Vue.jsの単一ファイルコンポーネントをコンパイルしてくれるスグレモノ。
css-loader
cssをJavaScript内で実行できる形にする。
sass-loader
sass,scssなどをcssに変える
glob
ファイル検索用のライブラリ。
任意のファイルを検索して配列で返す。
webpackのentryを設定するときに、複数ファイルを指定したいときなどに使用。
mini-css-extract-plugin
ファイルを吐き出す際にcssを別cssファイルとして吐き出してくれる。
jsとcssをしっかり分けたアーキテクチャにしたいときに使用する。
webpack-manifest-plugin
manifest.jsonも作成したいときに使用する。
私はRailsにwebpackを導入するときにsimpackerなるgemを使用してmanifest.jsonをたどってbundleしたファイルを読み込むらしいので使用しました。
おわりに
ざっとこんな感じでしょうかね。
8割型自分のメモ用として書いたので雑になってしまいました。。。反省します。
こんな記事でも最後まで読んでくださった方、ほんとに申し訳ございません。ありがとうございます。
参考サイト
