webpack에 대하여

webpack에 대해 전반적인 학습 정리

강의 중 webpack을 직접 설정하는 법을 배웠고, 더 나아가기 전에 webpack은 무엇이고 어떻게 쓰이는지 먼저 살펴보았다.

 

 

---

webpack은 무엇인가?

하나의 웹기능 혹은 무언가를 구현하기 위해서는 수많은 js 코드가 쓰인다. 수많은 코드들을 관리하기 위하여 HTML 파일에 기능별로 분리한 스크립트들을 삽입했더니 A.js에서 쓰인 변수명이 B.js에서 반응하는 등 모든 스크립트가 동일한 스코프를 공유하여 에러가 터지기 일쑤였다. 그렇다고 하나의 js 파일에 모든 코드를 쏟아부으면 가독성이 떨어져 유지보수하기가 어렵게 될 것이다.

ES6부터는 이런 단점을 해소하기위해 모듈화를 위한 import/export 구문이 등장했다. 스크립트 삽입 태그에 type 속성으로 module을 설정하면 각각 모듈 파일들은 서로의 스코프에 간섭하기 않고 작동된다.

그리고 더 나아가 webpack이라는 번들러가 나오게 되었는데, 이는 모듈화로 분리해놨던 js 파일들을 빌드 시 하나의 js 파일로 합쳐서 실행 해주는 것이다.  HTML에서 합쳐진 하나의 번들러 js파일 하나만 로드해주면 되니 코드가 압축, 최적화되어 배포되는 파일 크기가 줄어들게 됨으로 로딩 속도를 개선되기도 한다. 게다가 하나의 HTML만을 사용하는 SPA 방식이 대두되면서 하나의 HTML 파일에 수많은 js 파일을 때려부어야하니 더더욱 webpack의 장점이 부각된다.

 

webpack 실습

1. node 설치

webpack은 node에서 실행되기에 먼저 node를 설치해야한다.

 

2. webpack 설치

npm으로 설치해줬다. 더 다양한 방식을 알고 싶으면 공식사이트 참고하시길

* webpack 공식사이트 - 설치하기: https://webpack.kr/guides/installation

npm install --save-dev webpack

3. webpack 세팅

최상단에 webpack.config.js 파일을 생성하여 그 안에 설정값을 작성한다. 나는 강의를 보면서 따라한터라 react 설정을 위해 babel 설정도 같이 했다.

* webpack 공식사이트 - 세팅하여 실행: https://webpack.kr/guides/getting-started/

const webpack = require('webpack') //웹팩 가져오기
const path = require('path') // node의 경로 가져오는 기능

module.exports = {
    name: 'practice-webpack', // 어떤 파일을 위한 웹팩 설정인가에 대한거
    mode: 'development', // 실서비스에서는 production으로 바꿈
    resolve: {
        extensions: ['.js', '.jsx'] // entry 부분의 파일명은 여기다가 미리 넣어둠
    },

    // 입력
    entry: {
        app: ['./client'] // 여기에 있는 파일들을 모두 output의 파일로 합쳐준다
    },
    
    // entry의 것들을 아래 module을 적용해서 output으로 빼는 것
    module: {
        rules: [
        	// 바벨 적용
         	{
                test: /\\.jsx?/, //규칙을 적용할 파일들. js가 jsx파일을 이해할 수 있도록 해준다.
                loader: 'babel-loader', //바벨 로더 패키지를 연결
                options: {
                    presets: [
                        // 바벨 env연결. 배열로 감싸고 두번째 객체 인자 안에는 해당 플러그인의 디테일한 옵션값 
                        ["@babel/preset-env", {
                            targets: {
                                browsers: ['> 5% in KR'], // 바벨 어디까지 지원해줄지 범위. browserslist에서 태그 종류 있음
                            },
                        }],
                        "@babel/preset-react"
                    ] //바벨env,react 연결
                }
        	}
        ]
    },
    //확장 프로그램. 추가로 적용해준다.
    plugins: [
        new webpack.LoaderOptionsPlugin({ debug: true })
    ],
    
    // 출력: path로 filename으로 하나의 파일화 시켜준다.
    output: {
        path: path.join(__dirname, 'dist'), //node 기능. 현재폴더, 원하는폴더이름
        filename: 'app.js'
    }
}

< babel 같이 설정하기 >

module에 babel 적용한 것에 대한 설명 적어놓는다. babel-loader를 통해 webpack에서 바벨을 사용할 수 있게끔 해준다.

먼저 babel 관련해서 필요한 것들을 설치한다.

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

(순서대로: 바벨 코어, 브라우저에 맞게끔 문법 수정, react 문법 알아듣게끔하는거, 바벨이랑 웹팩이랑 연결하는거)

 

그다음 위의 코드의 module: rule 배열 안에 있는 코드를 참고하여 babel이 실행되게끔 하면 완성

 

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

순서대로, 바벨 코어, 브라우저에 맞게끔 문법 수정, react 문법 알아듣게끔하는거, 바벨이랑 웹팩이랑 연결하는거

 

4. webpack으로 실행

npx webpack을 활용해 실행하거나 package.json의 scripts에 명령어를 추가해서 실행한다.

 

webpack-dev-server

추가로 webpack-dev-server를 설치하여 개발의 편리성을 높였다. 기존의 방식은 코드를 일부 수정하고 그것을 화면에 띄우기 위해서는 webpack 실행 명령을 통해 모든 코드를 다시 빌드하였다. 그러나 이는 비효율적이기도 하고 무엇보다 일일이 다시 빌드하기 귀찮다! 

그래서 사용한 webpack-dev-server는 실시간 리로드 기능을 갖춘 개발 서버인데 코드가 변경될 때 마다 빌드된 결과물을 확인할 수 있는 개발용 서버를 제공해준다. webpack의 번들링 대상 소스 파일을 수정하고 저장하면 webpack을 실행하고 브라우저에 자동으로 수정된 코드를 반영하여 렌더링해준다. 실제 빌드는 오래걸리기 때문에 여기선 실제 결과물을 파일로 생성하지 않고, 메모리 상으로만 빌드한 결과물을 만들어서 브라우저에 빌드 결과물을 전달한다. 그러므로 개발이 완료되면 빌드를 해서 webpack 결과물을 파일로 생성해내야할 것이다.

 

webpack.condfig.js 파일에 아래와 같은 코드를 추가하여 사용한다.

    devServer: {
        devMiddleware: {
            publicPath: '/dist/' //빌드 시 이 경로에 결과를 저장한다. 
        },
        static: { directory: path.resolve(__dirname) }, //index.html 위치를 적음
        hot: true //webpack v4부터 hot은 자동으로 적용해서 굳이 안적어도 된댕
    }