실습으로 진행

// webpack.config.js
var path = require('path');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          "css-loader"
        ]
      }
    ]
  },
// 플러그인
  plugins: [
    new MiniCssExtractPlugin()
  ],
}

웹팩의 주요 속성인 plugins 속성이다.

plugins : [
    new MiniCssExtractPlugin()
  ]

그럼 직접 한번 돌려보자….

npm run build

오잉??? 플러그인을 추가하고 나서

스크린샷 2022-07-28 오후 4.26.16.png

아까와는 다르게 dist폴더 하위에 main.css 가 분리되어 생성 된것을 볼 수 있다.

다시 code-splitting.html로 가서 이제 분리된 css를 임포트 한다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS & Libraries Code Splitting</title>
  👉🏻<link rel="stylesheet" href='./dist/main.css'>

</head>

<body>
  <header>
    <h3>CSS Code Splitting</h3>
  </header>
  <div>
    <!-- 웹팩 빌드 결과물이 잘 로딩되면 아래 p 태그의 텍스트 색깔이 파란색으로 표시됨 -->
    <p>
      This text should be colored with blue after injecting CSS bundle
    </p>
  </div>
  <!-- 웹팩의 빌드 결과물을 로딩하는 스크립트 -->
  <script src="./dist/bundle.js"></script>
</body>

</html>

스크린샷 2022-07-28 오후 4.32.43(2).png

스타일이 적용되었고

스크린샷 2022-07-28 오후 4.32.53.png

link 태그에 style이 import 된것을 확인 할 수 있다.