section1. 2-7. @babel/preset-env와 plugins

웹팩 설정의 연속

 

plugin들의 모음이 preset이다.

module 중 하나인 babel-loader에서 presets를 명시할 수 있는데 해당 presets들은 사실 plugins의 모음들이다.

플러그인만의 옵션을 따로 적용할 수 있다.

        options:{ //바벨로더의 옵션
                presets:[['@babel/preset-env',{  //예전 브라우저 지원 문법으로 변경해주는 프리셋
                    targets:{   //@babel/preset-env 프리셋에 대한 옵션
                        browsers: ['> 5% in KR','last 2 chrome versions'] // 한국에서 5% 이상, 크롬 최신 전 버전까지만 지원 (browers list 사이트 참고)
                    },
                    debug: true
                }], '@babel/preset-react'],
                //plugins: ['@babel/plugin-proposal-class-properties']
        }

 

webpack의 플러그인

webpack의 플러그인을 따로 명시할 수 있다. (위에서 살펴본 모듈 플러그인과 다르다.)

 

정리

webpack 공식 사이트에서도 적용할 수 있는게 너무 많아서 복잡하다.

하지만 핵심은 5가지를 알고 있어야한다는 것.

entry,

output,

module (Loaders),

Plugins,

Mode (development, production)

 

외우는 방식을 웹팩 동작 순서대로 외우면 편리하다.

entry(시작하는 파일, 합쳐질 파일들) 

module (entry파일들에 적용될 규칙들)

plugins (추가적인 작업)

output(최종적으로 만들어질 파일)

 

지금까지 webpack.config.js 전체코드

const path = require('path'); //node에 기본적으로 제공해주는 path를 쉽게 조작하기 위한 라이브러리
const webpack = require('webpack');

module.exports = {
    name: 'word_relay-setting', //어떤 것을 위한 웹팩 설정인지
    mode: 'development', //실서비스에서는 production
    devtool: 'eval', //빠르게
    resolve: {
        extensions: ['.js', '.jsx'] //확장자 적어놓으면 xxx.js, xxx.jsx 알아서 찾아서 빌드한다.
    },
    //여기서 부터가 제일 중요
    //entry : 입력,
    //output: 출력
    entry: {
        app:['./client'] // './WordRelay.jsx' 는 이미 client.jsx에서 불러오고 있기 때문에 굳이 써주지 않아도 된다.
    },

    //webpack과 연결할 모듈들을 적시한다.
    module: {
        rules:[{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options:{ //바벨로더의 옵션
                presets:[['@babel/preset-env',{  //예전 브라우저 지원 문법으로 변경해주는 프리셋
                    targets:{   //@babel/preset-env 프리셋에 대한 옵션
                        browsers: ['> 5% in KR','last 2 chrome versions'] // 한국에서 5% 이상, 크롬 최신 전 버전까지만 지원 (browserslist 사이트 참고)
                    },
                    debug: true
                }], '@babel/preset-react'],
                //plugins: ['@babel/plugin-proposal-class-properties']
            }
        }],
    },
    plugins: [//webpack에 대한 plugins (바벨의 plugins와 다르다!)
        new webpack.LoaderOptionsPlugin({debug: true}) //Loader = module,rules 의 options에 debug: true를 넣어주는 것이다.
    ],
    output: {
        //path.join : 파라미터로 전달된 경로를 합쳐준다.
        //__dirname -> 현재 경로(lecture)
        path: path.join(__dirname, 'dist'), //C:\Users\iLovePC\Desktop\codingapple\zerocho-react-webgame\lecture 에 dist를 더해준다.
        filename: "app.js"
    }
}