모듈화 도구 웹팩 5 설정 하기

웹팩 5 번들 도구

최근 vanila javascript 미니 프로젝트관련해서 스터디 그룹에서

그룹장 역활을 진행중에 있는데

항상 프로젝트를 CRA나 세팅되어있는 보일플레이트등을 사용해서 밑바닥부터 웹팩을 아주 초창기 웹팩3 정도때 만져보고 만질일이 없었다.

그러다 최근 kakao 책검색 API 를 활용한 도서 검색 서비스 웹어플리케이션을 만들게 되어 webpack-dev-server를 활용해서 dev환경 설정을 해야 했다. 이전까지 프로젝트는 parcel을 사용해서 아주 빠르게 미니 프로젝트들을 수행했는데.

이번에는 웹팩5를 사용해서 환경세팅을 해보고자 했다. parcel로 빠르게 세팅해도 되었는데 ,이유는 그냥 내 자신을 혹사시키고 싶었다.(??)

무튼 webpack 5 설정을 해보기위해 인터넷 검색을 했다.

웹팩 설정 검색

많은 글들이 나온다. ㅋㅋㅋ 그중 webpack 5, 무엇이 달라졌을까? 이 블로그를 선택했다. 날짜가 그나마 최신이라서?

따라 했지만 버전이 안맞는건지 에러가 나온다. stack overflow에 검색을 했다. 역시 갓느님 해결방법 알려주셔서 그방법으로 돌렸는데 webpack-dev-server에서 저장시 실시간 업데이트가 안되는 이슈가 발생.

몇분동안 사투 끝에, 깔끔하게 몽땅 지우고 역시 갓느님 !! 공식 문서로 가서 문서 읽고 셋팅 했다 ㅋ

 

webpack

파일 구조

Loaders

공식문서 보고 필요한거만 쭈욱 셋팅에 넣고 설정 완료.

npm install --save-dev css-loader style-loader

 

module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ],
    },

 

최종

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    devtool: 'inline-source-map',
    output: {
        filename: '[name].main.js',
        path: path.resolve(__dirname,'dist'),
        clean: true,
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        overlay:true, //에러발생시 overlay 설정
        port: 3000, //포트번호
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            }
        ],
    },
}

package.json scripts 설정

이렇게 셋팅을 하고 localhost:3000 으로 나오게 yarn start치면 똭! 화면 나옴 ㅋ

웹펙데브서버

수정하고 저장하면 자동으로 브라우저 리로딩!

오늘의 교훈은 블로그 글 보단 역시 공식 문서가 역시 짱이다.