내가 보려고 만든 개발 공부 일지

웹팩 기본 세팅 본문

그 외 잡다구리

웹팩 기본 세팅

kwangsunny 2021. 10. 4. 23:58
반응형

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 : 빌드 후 개발서버를 시작한다.

반응형
0 Comments
댓글쓰기 폼
Prev 1 2 3 4 5 6 7 Next