はじめに Node.js向けに書かれたJavaScriptのプログラムをブラウザ上で動作させるには require() によるモジュールの参照を解決した単一のJavaScriptファイルに変換する必要があります1。 少し前まではこの作業には Browserify が使われることが多かったようですが、現在は「画像もCSSも何でも1つにします」が売りの webpack 一色になっている感じです。ですが、この webpack、とってもわかりにくいのです。設定ファイル webpack.config.js を見たときに私は TeX や sendmail の悪夢を思い出しました2。この黒魔術3を読み解いてみましょう。 webpack の仕事 画像とかCSSとかのことはおいておくと、webpackの仕事は以下の3つになります。 複数の.jsファイルの依存関係を解決し、1つにバンドルする これが本来業務で
![webpack.config の黒魔術をとく - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d46876033275de73027b9caae3da347c7f59b053/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9d2VicGFjay5jb25maWclMjAlRTMlODElQUUlRTklQkIlOTIlRTklQUQlOTQlRTglQTElOTMlRTMlODIlOTIlRTMlODElQTglRTMlODElOEYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTdkYTUxNzJiZGNiMmM1NTlhZTI5NDkwODM0ZTZjMmI1%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa29iYWxhYiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDdkZDA1Yzg2Mzk2Yzc3NjIwMmEwNTRiYzJkOGY3Nzc%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D8601d49a652d545c5ba1b4b788f77730)