번들러) Webpack 세팅하기 ⚒

iamokian·2022년 7월 9일

Webpack Setting Process

파슬번들러의경우 구성옵션없이 자동화되어 처리되지만 웹팩의 경우 따로 구성옵션을 제공하고 정리해주어야 한다.
일일히 작성하는것이 번거로울 수 있지만 디테일한 구성옵션을 통해 프로젝트를 세세하게 다뤄낼수 있다.
그리하여 웹팩의 경우 규모가 좀 있는 프로젝트에 용이하다.

Step1.

npm 프로젝트 시작(package.json생성)

npm init -y

webpack, webpack-cli, webpack-dev-server 패키지 설치
(웹팩 데브서버는 웹팩 cli와 메이저버전을 일치시켜줘야하기때문에 @next 키워드 추가)

npm i -D webpack webpack-cli webpack-dev-server@next

package.json - 개발서버 오픈 명령어, 빌드 명령어 수정

"scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
}

webpack-dev-server을 통해 개발서버를 오픈하려면 구성파일을 제공해줘야함
webpack.config.js 파일 생성후 webpack의 기본적인 구성옵션 설정

Step2.

webpack.config.js 파일 생성후 기본적인 구성옵션추가

entry
output

module.exports = {
    const path = require('path');

    // 파일을 읽어들이기 시작하는 진입점 설정(웹팩의 기본 진입점은 js파일)
    entry: './js/main.js',
    // 결과물(번들)을 변환하는 설정
    output: {
        // 어떤 경로에 결과물을 내어줄껀지(node.js에서 필요로 하는 절대경로가 필요)
        path: path.resolve(__dirname,'dist'),
        // 그 결과는 entry와 동일하게 지정해줄수 있음
        filename: 'main.js',
        // 설정시 기존에 만들어진 파일을 제거할 수 있음
        clean: true
    }
}

코드 해석: node.js환경에서 언제든지 가져와서 사용할수 있는 path전역 모듈을 가져와서 path변수에 할당 후 resolve메소드를 사용해 첫번째 인수와 두번째 인수에 있는 경로를 합쳐준다. __dirname(현재파일이있는 그 경로를 지칭)는 node.js에서 사용가능한 전역변수이므로 언제든지 불러와서 사용이 가능하고, 그것을 dist라는 폴더의 이름을 합쳐서 절대적인 경로를 path에 제공, 그리고 entry의 파일이 filename에 지정된 이름으로 빌드됨

html-webpack-plugin 패키지 설치

npm i -D html-webpack-plugin

webpack.config.js 파일 수정

const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
    ...,
    // 번들링 후 결과물의 처리 방식 등 다양한 플러그인 설정
    plugins: [
        new HtmlPlugin({
            // 루트경로에 만들어둔 index.html파일
            template: './index.html'
        }),
    ],
    // 포트번호 주소가 잘못나올 시 설정
    devServer: {
        host: 'localhost'
    }
}

Step3.

favicon, img 파일 연결하기
static 폴더 생성 후 favicon 파일 삽입, 그리고 하위 images폴더에 png파일 삽입

copy-webpack-plugin 설치

npm i -D copy-webpack-plugin

webpack.config.js 내용 추가

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    ...,
    plugins: [
        ...,
        new CopyPlugin({
            patterns: [
                // static 폴더에 있는 내용이 복사가 되어 dist 폴더에 삽입됨
                { from: 'static' }
            ]
        })
    ],
    ...
}

Step4.

CSS 설정
main.js 파일에 css 파일 import시키고

import '../css/main.css'

CSS를 읽어올수 있도록 외부 패키지 설치후 webpack.config.js 수정

npm i -D css-loader style-loader

module.exports = {
    ...,
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // html파일에 해석된 css 스타일을 삽입
                    'style-loader',
                    // js파일에 있는 css를 해석
                    'css-loader',
                ]
            },
        ]
    },
    ...
}

Step5.

설정한 CSS를 SCSS로 수정하기
main.js에 있는 css 를 scss로 수정후 추가 loader 설치

import '../scss/main.scss'

npm i -D sass-loader sass

webpack.config.js 수정

module.exports = {
    ...,
    module: {
        rules: [
            {
                test: /\.s?css$/,
                use: [
                    ...,
                    'sass-loader'
                ]
            },
        ]
    },
    ...
}

Step6.

Autoprefixer 패키지 설치
Autoprefixer 패키지 설치 후 webpack.config.js 수정

npm i -D postcss autoprefixer postcss-loader

module.exports = {
    ...,
    module: {
        rules: [
            {
                test: /\.s?css$/,
                use: [
                    ...,
                    // sass위에 적어야 함
                    'postcss-loader',
                    'sass-loader'
                ]
            },
        ]
    },
    ...
}

package.json 에 borwerslist 추가

"browserslist": [
    "> 1%",
    "last 2 versions"
]

.postcssrc.js 파일 생성 후 내용추가

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

Step7.

Babel 적용

npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

.babelrc.js 파일 생성 후 구성 옵션 정리

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
        ['@babel/plugin-transform-runtime']
    ]
}

webpack.config.js 파일 수정

module.exports = {
    ...,
    module: {
        rules: [
            ...,
            {
                test: /\.js$/,
                use: [
                    'babel-loader'
                ]
            }
        ]
    },
    ...
}