웹팩 기본 세팅

webpack 이 뭐고 왜쓰는지에 대해 간단히 적어봅니다.

 

웹팩은 웹개발을 도와주는 많은 기능들을 가지고 있는 자바스크립트 모듈 번들러이다.

기본적으로 import, export 를 통해 서로 의존관계에 있는 html, js, img, css 같은 모든 리소스들을(= 모듈)

모두 찾아서 연결해주고 하나의 파일로 만들어준다.

웹팩을 쓰지 않고 그냥 import 구문을 쓰게되면 브라우져에서 실행 시 에러가 난다.

브라우저가 import, export 를 못알아먹기 때문인데,

그래서 스크립트 태그에 <script type="module"> 이런식으로 타입=모듈 을 명시해줘서 '이 스크립트는 모듈이다' 하고 브라우저에게 알려줘야 import export 를 쓸 수 있다.

그치만 웹팩을 사용하면 파일들을 하나의 결과물 파일로 만들어주기 때문에 위처럼 일일이

스크립트 태그에 타입=모듈 을 할 필요가 없어진다.

 

그런데, html 에서 <script src='~'> 와 같은 형태로 js파일을 가져와 써도 될텐데 위와 같이 웹팩을 쓰는 이유는?

Html 파일에서 태그로 가져온 js 파일들은 모두 같은 스코프를 공유하게 된다. (= 전역 스코프)

즉, 변수명이 같은게 있으면 버그가 생길 수 있는거다.

Js 파일이 몇 개 없고 나혼자 개발한다고 하면 얼마든지 이런 이슈를 관리할 수 있지만, 플젝 규모가 커지고

여러 사람들이 같이 개발을 하게 된다면 이런 스코프 문제를 감당하기 힘들것이다. 

그래서 스코프가 겹칠일이 없도록 import 를 통해 모든 코드를 모듈화 해서 개발하는 것이고 이를 도와주는게 웹팩이다.

 

또한가지 이유로 html에서 스크립트 태그를 여러개 써서 스크립트를 가져오면 첫 로딩시 html 파서가 스크립트 태그를 만날때 마다 스크립트를 다운받는 요청을 여러번 하게되는데, 웹팩을 쓰면 하나의 결과물 파일 (js파일) 만 있으므로

초기 로딩 속도도 더 빨라진다.

 

물론 이 두가지는 웹팩을 사용하는 가장 기본적인 이유이고 훨씬더 많은 기능들도 가지고 있다.

 

이제 간단한 웹팩 초기 세팅을 해보자.

웹팩을 사용하려면 우선 웹팩을 설치하자.

• npm install webpack : 웹팩 설치
• npm install webpack-cli : 터미널에서 webpack 명령어를 사용할 수 있게 해준다
• npm install webpack-dev-server : 웹팩 개발 서버

터미널에서 webpack 명령어를 입력하면 모든 html, js, css 같은 모듈들이 압축되어 

하나의 결과물 파일로 만들어지는데 (= 번들링 이라고 함)

이 결과물을 브라우져에서 실행할 수 있게 해주는게 해주는게 webpack dev server 이다.

 

webpack dev server 는 서버실행 시 파일들을 번들링하여 메모리에 저장해 놓는다.

그래서 코드를 수정하게 되면 알아서 변경을 감지해서 브라우져에 변화를 반영해준다.

즉, 새로고침 없이 수정된 부분을 즉각 반영해 주는 고마운 녀석이다.

 

추가로 기본적인 plugin 을 설치하자.

1. npm install clean-webpack-plugin : 빌드를 수행하면 결과물 파일이 웹팩의 output 설정 경로에 생기게 되고

   다음에 빌드할때 이전에 빌드한 결과물 파일들이 여전히 남아있게 되는데 이를 삭제해주는 녀석이다.

2. npm install html-webpack-plugin : 번들링한 js, css 같은 파일들은 시작점 html 파일에 <script src='~'> <link ~>

   이런식으로 추가해줘야 하는데 이를 알아서 수행해준다.

3. npm install mini-css-extract-plugin : css를 별도의 파일로 추출해준다.

 

참고로 loader 와 plugin 의 차이는 ?

Loader 는 파일들을 번들링하는 과정에 관여하는 녀석이고

Plugin 은 번들링된 결과물의 형태를 바꿔주는 녀석이다.

 

위와같이 기본 설치가 끝났으면 vscode 에서

webpack.config.js 라는 이름으로 파일 하나를 만들자.

그리고 이 파일에서 웹팩의 설정들을 작성해주면 된다. (설정 옵션들은 구글링하면 잘 나와있다)

 

 

webpack.config.js 기본 작성 예시

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
    mode: 'none', // 기본옵션
    entry: {
        bundle: './src/index.js' // 번들링 시작점이될 파일
    },
    output: { // 결과물 경로, 파일명 등 설정
        publicPath: '/',
        filename: '[name].js',
        path: path.resolve(__dirname + '/build')
    },
    devServer: { // webpack dev server 설정
        static: path.resolve(__dirname + '/build'),
        port: 4000
    },
    devtool: 'cheap-module-source-map', // 개발자도구에서 원래 형태의 코드를 보여주는 옵션(디버깅을 위해 사용함)
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'] // mini-css 플러그인을 style-loader 자리에 대신 써준다. 
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'app.css' // 추출할 css 파일명 정의
        }),
        new CleanWebpackPlugin()
    ]
}

 

package.json 스크립트

"scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
},

npm run build : 빌드를 해줌 (번들링)

npm start : 빌드 후 개발서버를 시작한다.