PostCss & Autoprefixer 기본 설정(w. webpack)

PostCss, Autoprefixer (w. webpack)

🦊 1. webpack으로 실행을 위한

"webpack", "webpack-cli", "webpack-dev-server",

"html-webpack-plugin",

"style-loader", "css-loader"

🐯 > 설치

여기 요기 설치 설명 보세요

> npm i -D webpack webpack-cli webpack-dev-server
> npm i -D html-webpack-plugin
> npm i -D style-loader css-loader

🐯 > package.json

실행을 위한 것 제작 & browser 범위 지정

"browserslist":[
  "> 1%",
  "last 2 versions",
],
"scripts": {
  "dev": "webpack-dev-server --mode development",
  "build": "webpack --mode production",
}

🐯 > webpack.config.json

const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    publicPath: '/',
    clean: true,
  },
  module: {
    rules: [
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    })
  ]
}

 

이젠 PostCss, Autoprefixer에 대해 나오는데
기본으로 알고가면 좋은 개념을 정리하였습니다.

< PostCss - CSS 후처리 >

: 화면에 보여주고 나서 CSS 변경
(기본 CSS 파일 작성 -> 렌더링 -> CSS변경)

근데 이것을 왜 쓰냐?? 궁금했습니다.
보니 CSS 작성을 더 편하게 만들어준다고 하니 해봐야 알 것 같습니다. :)

< Autoprefixer - prefixer >

: 새로운 CSS 기능을 제공할 때 이전 버전 브라우저에 그 사실을 알려주기 위한 것(-webkit, -ms ...)

 

🦊 2. CSS 후처리, 새 기능 사용(prefixer)을 위한

"postcss", "postcss-loader"

"autoprefixer"

🐯 > 설치

> npm i -D postcss postcss-loader
> npm i -D autoprefixer

🐯 > webpack.config.json

const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    publicPath: '/',
    clean: true,
  },
  module: {
    rules: [
    {
      text: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    }
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    })
  ]
}

🐯 > postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}