css 번들링

CSS를 번들링하는 방법은 크게 2가지다.

• <style></style>를 이용해 주입
• 별도의 파일로 추출

각 방법에 따라 필요한 패키지, 사용방법이 다르다.

style 태그로 주입 시

package.json

"dependencies": {
  "css-loader": "^5.0.1", // css를 읽어준다.
  "style-loader": "^1.2.1" // style 태그로 주입시킨다.
}

webpack.config.js

module.exports = (env, ooptions) => {
  return {
    module: {
      rules: [
        {
          { 
            test: /\.css/, 
            use: [ 'style-loader', 'css-loader' ]
    	  }
        }
      ]
    } 
  }
}

별도의 파일로 추출 시

package.json

"dependencies": {
  "css-loader": "^5.0.1", // css를 읽어준다.
  "mini-css-extract-plugin": "^1.4.1", // 별도의 파일로 minify 하여 추출한다.
}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env, ooptions) => {
  return {
    module: {
      rules: [
        {
          { 
            test: /\.css/, 
            use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
    	  }
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: 'assets/css/app.css' }),
    ]  
  }
}

참고

https://www.zerocho.com/category/Webpack/post/58ac2d6f2e437800181c1657