Bundler[Webpack] - Autoprefixer(PostCSS)

01.Autoprefixer

• 공급업체 접두사를 자동으로 진행해주는 패키지 autoprefixer를 webpack을 통해 설치하는 방법에 대해 알아봅니다.

02.Autoprefixer 패키지 설치 전

main.scss 파일 설정

$color---black: #000;
$color---white: #fff;

body {
  background-color: $color---black;
  h1 {
    color: $color---white;
    font-size: 40px;
    display: flex;
  }
}

• h1태그 속성에 display: flex; 설정을 해줍니다.

개발 서버 실행

$ run npm dev

• Autoprefixer가 설정되어 있지 않는것을 확인할 수 있습니다.

03.Autoprefixer 설치 & 설정

3-1.패키지 설치 & 확인

$ npm i -D postcss autoprefixer postcss-loader

• postcss, autoprefixer, postcss-loader 총 3가지 패키지를 개발용으로 설치해줍니다.
• postcss는 스타일의 후처리를 도와주는 패키지로 그 안에서 autoprefixer라는 공급 업체 접두사를 자동으로 붙여주도록 설치합니다.
• 마지막으로 이 두 패키지가 webpack에서 동작할 수 있도록 postcss-loader를 설치해줍니다.
• package.json

 "devDependencies": {
    "copy-webpack-plugin": "^9.1.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.50.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  },
  "dependencies": {
    "autoprefixer": "^10.4.4",
    "postcss": "^8.4.12",
    "postcss-loader": "^6.2.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

3-2.postcss-loader 삽입

module: {
  rules: [
    {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    }
  ]
}

• webpack.config.js 파일에 module 옵션을 코딩해줍니다.
• 반드시 순서를 위와 같이 코딩해주셔야 합니다.
• sass-loader로 SCSS 파일을 읽어온 후 post-loader로 공급 업체 접두사를 적용하여post-css의 플러그인들을 사용할 수 있는 것입니다.
• 그리고 이를 css-loader로 읽어들여 마지막으로 style.loader로 index.html에 style 태그로 삽입할 수 있도록 하는 것입니다.

webpack.config.js

// import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

  module: {
    rules: [
      {
        test: /\.s?css$/, // .scss 또는 .css확장자로 끝나는 파일을 찾는 정규 표현식
        use: [
          "style-loader", // main.css에 해석된 내용을 삽입하는 패키지
          "css-loader", // JS에서 CSS 파일을 해석하는 패키지
          "postcss-loader", // 공급업체 접두사를 적용해주는 패키지
          "sass-loader"
        ]
      }
    ]
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html"
    }),
    new CopyPlugin({
      patterns: [
        { from: "static" } // static 폴더안에 있는 내용들이 복사되어 dist폴더 안에 들어갈 수 있게 설정하는 옵션
      ]
    })
  ],

  devServer: {
    host: 'localhost'
  }
}

3-3.package.json

• package.json 파일에 browerslist 옵션을 코딩해줍니다.
• browerslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도입니다.

"browserslist": [
  "> 1%",
  "last 2 versions"
]

• 이것은 현재 프로젝트에서 전 세계의 점유율이 1% 이상인 모든 브라우저의 마지막 2개 버전까지 모두 지원을 하겠다는 의미입니다.

3-4.postcssrc.js 파일 생성

• .postcssrc.js 마침표로 시작하는 rc(runtime configuration) 파일, 즉 구성 파일을 만들어줍니다.
• 마침표로 시작하는 것은 구성 옵션이나 숨김 파일을 의미합니다.

import & export

• .postcssrc.js 파일 내에 아래 내용을 코딩해줍니다.

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

• 주로 사용하는 import, export 키워드는 node.js 환경에서 사용이 불가하여 CommonJS 방식인require(), module.exports 키워드를 이용하여 JavaScript 파일을 가져오고 내보냅니다.

04.개발 서버 오픈

$ npm run dev

• 개발 서버를 열어서 패키지가 잘 동작하는지 확인합니다.

Autoprefixer 패키지 설치 후