webpack 구조

webpack.config.js에서 웹팩을 설정한다.

preset은 플러그인의 모음이다.

웹팩 설정파일은 크게 5가지가 메인 설정이다.

entry - 입력파일

module - 로더 설정

plugins - 추가 작업 설정

output - 출력파일

mode - 개발/운영 선택

순서대로 입력파일을 받아서 로더와 플러그인을 적용하여 출력파일을 만든다음

개발 혹은 운영에 배포하는 컨셉이다.

사실 웹팩은 로더가 복잡하다.로더설정이 웹팩의 거의 전부이다.

왜 로더가 복잡한지 설정파일을 한번 보자

const path = require('path');
const webpack = require('webpack');

module.exports = {
    name : 'Gugudan-webpack-setting', //웹팩 이름
    mode : 'development', //실서비스는 production
    devtool : 'eval',
    resolve : { //확장자를 생략하기 위한 설정
        extensions : ['.js', '.jsx'] //여기에 확장자를 적어줌
    },
    entry : {
        app : ['./client'] //client.jsx에서 불러오는 모듈은 안적어줘도 자동으로 같이 패킹함
    }, //입력 파일 설정
    module : {
        rules : [
            {
                test: /\.jsx?/,
                loader: 'babel-loader', //로더 이름
                options: {    //로더의 옵션
                    presets: [   //preset이란 플러그인의 모음이다.
                        ['@babel/preset-env', {  //babal/preset-env를 사용한다
                            targets: {  //preset-env 옵션으로 browsers를 설정한다
                                browsers: ['> 5% in KR','last 2 chrome versions'],
                            }, //한국에서 점유율이 5%이상인 브라우저를 지원한다는 의미이다.
                            debug: true, //바벨 디버깅모드로 실행
                        }],
                        '@babel/preset-react'],
                    plugins: [], //옵션에 사용할 플러그인은 없다
                }, //options end
            }, //rules first objects end
        ], //rules end
    }, //module end
    plugins: [ //여기에 사용할 플러그인을 나열한다.
      new webpack.LoaderOptionsPlugin({ debug: true }), //로더 옵션을 debug로 모두 설정
    ],
    output : {
        path : path.join(__dirname,'dist'), //현재디렉토리 + dist
        filename : 'app.js'
    }, //출력 파일 설정

};

mode는 한줄이다.

entry와 output은 파일 목록을 적어주면 그만이다.

plugin은 복잡해보이지 않는다.

문제는 modules이다. 얘가 loader이다.

간략히 해석하자면 modules는 여러개의 rules를 가질 수 있고

rules는 여러개의 loader로 구성되어 있고,

loader은 여러 옵션을 가지고 있으며 preset옵션에

babel/preset-env를 추가했고 해당 preset은 타겟브라우저를 설정하는 옵셥을 가지고 있다.

위 설정에서는 한국에서 점유율이 5%이상인 브라우저를 타겟으로 바벨을 동작 시키겠다는 의미이다.

매우 복잡해 보이지만 의미론적으로 들어가면 모두 이유가 있는 옵션들이다.

결국 웹팩은 로더와 플러그인을 잘 써야한다.

바벨 browsers옵션으로 참고할만한 사이트를 첨부한다.

https://github.com/browserslist/browserslist