文系未経験プログラマ

忘れてもいいように書く

webpackでjs以外のファイルを読み込む方法

【前提知識】

・webpackはjsファイルのモジュールバンドラー

  →jsをモジュールという単位で分割し、それらをブラウザで使用できる形に1ファイルにまとめてくれるやーつ

 

【本題】

・jsファイル以外もwebpackで読み込めるんです!!

 →対象のloader(css読み込みならcss-loader, jsonならjson-loader)とやらをconfigファイルに書いてあげる

 

 こんな感じ

module: {
loaders: [
// css-loader
{ test: /\.css$/, loader: 'css?minimize' },

// json-loader
{ test: /\.json$/, loader: 'json' },
],
}

 

【感想】

・webpackのconfigは他にも色々ある から見とかないと

 

【参考】

公式

webpack

 

わかりやすい

webpackを使い倒す - Thujikun blog