Webpack 이 뭐지?

전문 용어로 모듈 번들러( Module Bundler )라고 한다. 쉽게 말하자면 웹팩은 원본 코드 파일( js, SCSS ... )들을 찾아서 개발자가 설정한 대로 변경해주고 파일을 합쳐준다.

why use?

  • 프로젝트를 단 하나의 파일로 작성하기엔 개발자가 관리하기 힘들고, 그렇다고 코드 파일들을 많이 분할 작성하면 그만큼 로딩속도가 느려진다. Webpack은 분할 작성된 코드 파일을 하나로 통합시켜주어 이런 문제점들을 한번에 해결가능하다.
  • 여러 형식의 코드들을 loader를 이용하여 브라우저가 이해 할 수 있게 번역해준다
    ex) Modern JS => ES5, scss => css, React => vanilla js ...

설치

npm install webpack webpack-cli
// or
yarn add webpack webpack-cli

webpack-cli : 커맨드 창에서 webpack을 사용할 수 있게 해준다

설정

webpack 을 실행하게 되면 webpack 설정 파일인 webpack.config.js 라는 파일을 찾게 된다 (참고로 webpack.config.js 파일은 최신 문법을 사용 할 수 없다)

webpack.config.js

const path = require('path');

const config = {
    // 웹팩을 실행할 파일의 경로 (절대 경로로 설정해주자)
    entry : path.resolve(__dirname, 'assets','js','main.js'),
    mode : process.env.MODE, // 'development' or 'production'
    // 처리 후 저장할 폴더 경로
    output : {
        path : path.join(__dirname, 'static'),
        filename: '[name].js'
    }                    
}
module.exports = config;

webpack은 엄청 복잡해보이는데 하나씩 분석해보면 간단하다

실행

터미널에 webpack을 입력하면 실행된다

webpack

webpack -watch 라고 입력하면 종료되지 않는다. 그리고 지켜보고 있다가 내용이 변경되면 다시 실행한다

지금은 따로 설정한 게 없어서 실행시켜보면 assets/js/main.js 파일을 그대로 static 폴더로 저장할 것이다

path 는 node.js 내장모듈로 절대경로를 설정해준다
resolve()는 파일을, join() 폴더를 설정할 때 사용한다

Modules

webpack.config.js

const path = require('path');

const config = {
    // 웹팩을 실행할 파일의 경로 (절대 경로로 설정해주자)
    entry : path.resolve(__dirname, 'assets','js','main.js'),
    mode : process.env.MODE, // 'development' or 'production'
    // 처리 후 저장할 폴더 경로
    module : {
      rules : [
        {
          // 이곳에 모듈들을 적용한다
        }
      ]
    }
    output : {
        path : path.join(__dirname, 'static'),
        filename: '[name].js'
    }                    
}
module.exports = config;

babel

모던 자바스크립트를 표준 자바스크립트로 변환하기 위해 babel-loader 를 사용할 것이다

Babel 이란?
Document : https://github.com/babel/babel-loader

설치

npm install babel-loader @babel/core @babel/preset-env
// or
yarn add babel-loader @babel/core @babel/preset-env

설정

webpack.config.js

const config = {
    ...
    module: {
        rules: [          
          {
            test: /\.(js)$/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"]
              }
            }
          }
        ]
      },
    ...
}

/\ .(js)$/ 은 정규 표현식으로 .js 포맷 형식의 파일들을 찾는다


css

여러개의 css 파일들을 추출하여 하나로 통합하기 위해 mini-css-extract-plugin 을 사용한다. 그리고 css-loader은 웹팩이 css 파일을 읽을 수 있게 도와준다

Document :
https://github.com/webpack-contrib/mini-css-extract-plugin
https://github.com/webpack-contrib/css-loader

설치

npm install mini-css-extract-plugin css-loader
// or
yarn add mini-css-extract-plugin css-loader

설정

webpack.config.js

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

const config = {
    ...
    module: {
        rules: [
          ...
          {
            test: /\.(css)$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader"
            ]
          }
        ]
      },
    plugins: [
          new MiniCssExtractPlugin({
              filename: "styles.css"
        })        
    ],
    ...
}

/\ .(css)$/ 은 정규 표현식으로 .css 포맷 형식의 파일들을 찾는다

plugin의 설정은 styles.css 이름의 파일로 통합해라는 뜻이다


sass / scss

.sass 파일이나 .scss 파일 둘다 sass-loader 를 사용하면 된다

Document : https://github.com/webpack-contrib/sass-loader

설치

npm install sass-loader
// or
yarn add sass-loader

설정

webpack.config.js

const config = {
    ...
    module: {
        rules: [
          ...
          {
            test: /\.(scss|sass)$/, // 변경
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              "sass-loader" // 추가
            ]
          }
        ]
      },
    plugins: [
          new MiniCssExtractPlugin({
              filename: "styles.css"
        })        
    ],
    ...
}

간단하게 확장명 변경해주고, css-loader 설정에서 sass-loader 만 넣어주면 된다


postcss

postcss 란 css에 여러 기능(플러그인)을 추가해주는 툴이라고 보면 된다

Docuemnt : https://github.com/postcss/postcss

설치

npm install postcss-loader
// or
yarn add postcss-loader

설정

webpack.config.js

const config = {
    ...
    module: {
        rules: [
          ...
          {
            test: /\.(scss|sass)$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              "sass-loader",
              "postcss-loader" // 추가
            ]
          }
        ]
      },
    plugins: [
          new MiniCssExtractPlugin({
              filename: "styles.css"
        })        
    ],
    ...
}

설정은 너무나도 간단하다
하지만 postcss 는 툴이기 때문에 따로 플러그인을 설치하고 설정해줘야한다

plugin

postcss 에는 정말 많은 플러그인 있다. 그중에서도 많이 쓰이는 autoprefixer 를 적용해보자

autoprefixer 란?
Can I Use 사이트를 기반으로 css 요소에 다양한 브라우저에 맞는 문법을 추가 시켜주는 아주 고마운 플러그인이다

npm install autoprefixer
// or
yarn add autoprefixer

먼저 다운을 받고 postcss 설정 파일인 postcss.config.js 파일을 만들어주자
이 파일에서 플러그인을 적용시킨다

postcss.config.js

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

이렇게 plugins 배열에 다른 플러그인을 추가시켜도 된다

테스트

transform:zoom 문법은 브라우저마다 다르게 작성된다. 웹팩을 실행해보자

body {
  transform: zoom;
}

결과

styles.css

body {
  -webkit-transform: zoom;
  -moz-transform: zoom;
  -ms-transform: zoom;
  -o-transform: zoom;
  transform: zoom; 
}

Perfect !!