トップ > webpack > cssファイルをバンドルしたい

cssファイルをバンドルしたい

webpack

必要なローダーをインストールする

前回のwebpackことはじめからのつづき

npm i -D css-loader style-loader

css-loaderだけでいいかとおもったけどstyle-loaderも必要とのこと

  • css-loader => cssをjsでも扱えるようにするためのもの
  • style-loader => jsを読み込み時cssの内容を展開するもの

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が展開される