cssファイルをバンドルしたい
必要なローダーをインストールする
前回のwebpackことはじめからのつづき
npm i -D css-loader style-loader
css-loaderだけでいいかとおもったけどstyle-loaderも必要とのこと
style.cssの作成、編集
srcフォルダ内にstyle.cssを作る
バンドルされたかを確認したいだけなので簡単なのを追加
+ html,body { + background: green + }
index.jsにstyle.cssを読み込むようにする
+ import './style.css'
webpack.config.jsの追加
output: { filename: 'main.js' }, mode: 'development', + module: { + rules: [ + { + test: /\.css$/, use: ['style-loader', 'css-loader'] + } + ] + } }
ビルド
npm run build
distに出力されたmain.jsを読み込むと
ないにstyleが展開される