webpack(ウェブパック)とは、モジュールバンドラーと呼ばれる複数のファイルを1つにまとめることが出来るツールです。 webpackを使うことによって、サイト上でサーバーへのリクエストを減らして表示速度を向上出来たり、開発時に機能ごとに複数のファイルに分けて作業をすることが可能になります。 本記事では、サービスサイトなど通常のサイトを作ることを想定としており、Vue.jsなどを使いSPAを作るフロントエンドエンジニア向けでは無いので予めご了承下さい。 また、本記事で紹介しているwebpackの設定で出来ることは下記の通りになります。 Sass(Scss)をコンパイルしてcssに出力 cssにベンダープレフィックスを自動付与(Autoprefixer) ES6をES5にコンパイル(これによりアロー関数やファイル分割が可能になる) cssとjsでソースマップを使用可能&minify化 開発
![【テンプレ有り】webpack4でSassとES6の開発環境を構築する](https://cdn-ak-scissors.b.st-hatena.com/image/square/d27aeec78a761186d93bbab6aede59cc04b22860/height=288;version=1;width=512/https%3A%2F%2Fweb-guided.com%2Fwp-content%2Fuploads%2F2019%2F02%2Fwebpack.jpg)