[ Node.js ] 번들러 - Webpack (중/대형 프로젝트)

FrontEnd/Node.js

[ Node.js ] 번들러 - Webpack (중/대형 프로젝트)

jimin-log 2023. 8. 16. 00:38

Webpack 프로젝트 생성

웹팩은 오픈소스 자바스크립트 모듈 번들러로 여러개로 나누어져 있는 파일들을 하나의 자바스크림트 코드로 압축하고 최적화하는 라이브러리 이다.

모듈단위로 개발이 가능하여 가독성과 유지보수가 쉽다.

1. Webpack 번들러 설치

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

3개의 패키지 설치가 필요하다.

webpack
webpack-cli : 터미널에서 입력할 수 있는 기능
webpack-dev-server@next : 개발 할 때 수정사항 새로고침 기능

1-1 . scripts 부분 설정

"dev": "webpack-dev-server --mode development",
"build" : "webpack --mode production"

📑package.json

{
  "name": "webpack-template-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build" : "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.88.2", 
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.0.0-rc.1"
  }
}

1-2 . 개발서버 실행을 위한 구성파일 추가 'webpack.config.js'

parcel와 달리 config 파일에서 설정 파일을 관리한다.
또한 javascript를 진입점으로 사용한다.
ex) parcel index.html | webpack main.js

entry : 파일을 읽어들이기 시작하는 진입점 설정(javascript가 진입점)
output : 결과 (번들)을 반환하는 설정
- path : 절대 경로 ( 지정하지 않을 시 기본 경로 : dist 폴더 )
- filename : 파일 명칭 ( 지정하지 않을 시 기본 명칭 : main.js )
- clean : 수정시 기존 있던 파일은 제거 (필요하지 않은 내용 제거)

📑 webpack.config.js

module.exports={
    entry: './js/main.js',
    output: {    
          path = public,
          filename = main.js,
        clean: true
    }
}

※path 생성시 path전역 모듈을 사용해 절대경로를 지정해줄 수 있다.

//import : 패스 전역 모듈을 가져옴
const path = require('path');

module.exports={
    entry: './js/main.js',
    output: {
      // path.resolve(1,2)
      // 첫번째 인수와 두번째인수의 경로를 합쳐준다.
      // __dirname: node.js의 지정되어 있는 전역 변수로 현제 파일이 있는 경로를 지칭
        path: path.resolve(__dirname,'public'),
        filename: 'main.js',
        clean: true
    }
}

이외의 설정 관련해서는 webpack 사이트에서 확인할 수 있다.

Concepts | 웹팩

웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.

webpack.kr

2. 개발서버 연결

2-1. 모듈 설치

npm i -D html-webpack-plugin

2-2. 모듈 연결 : webpack.config.js 파일 수정

📑 webpack.config.js

const path = require('path');
// 1. dev 플러그인 연결
const HtmlPlugin = require('html-webpack-plugin');


module.exports={
    entry: './js/main.js',
    output: {
        clean: true
    },
    // 2. 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
    plugins: [
        new HtmlPlugin({
            template: './index.html'
        })
    ],
    // 3. host 경로 추가
    devServer: {
        host:'localhost'
    }
}

3. 정적파일 연결

3-1. static 폴더 생성

images 폴더 :이미지 및 파비콘
css 폴더 : css파일

3-2. 모듈 추가 설치

static폴더를 복사해서 dist 폴더에 넣어주는 역할

npm i -D copy-webpack-plugin

3-3. 모듈 연결 : webpack.config.js 파일 수정

📑 webpack.config.js

//1. 모듈 가져오기
const CopyPlugin = require('copy-webpack-plugin');
...


module.exports={
    entry: './js/main.js',
    output: {
        clean: true
    },
    plugins: [
        new HtmlPlugin({
            template: './index.html',
        }),
        //2. 실제 사용 설정
        new CopyPlugin({ 
            patterns: [
                {from: 'static'}
            ]
        })
    ],
    ...
}

3-4. 연결 확인

npm run dev 개발서버를 실행 시키면 이미지가 잘 연결되고 있다.

npm run build 를 실행시켜 보면 dist폴더 안에 생성된 것을 확인할 수있다.

4. 루트경로의 CSS 스타일 적용

4-1. main.js에 연결

webpack은 main.js 부터 읽게 설정이 되어있다.

때문에 해당 파일에서 import css파일을 연결 시켜주면 파일을 읽을 수 있다.

📑 main.js

import '../css/main.css'
console.log("webpack");

4-2. 모듈 설치

npm i -D css-loader style-loader

두개의 모듈 설치

css-loader
style-loader

4-3. 모듈 연결 : webpack.config.js 파일 수정

📑 webpack.config.js

...
,module:{ // 1. 모듈 사용명시
    rules:    [
        {
            test: /\.css$/, // 2 .정규식 .css로 끝나는 파일들은 아래 패키지들을 사용한다고 명시
            use:[
                'style-loader',// 3. 실제 html style 태그에 내용을 삽입
                'css-loader' // 4. javascript에서 css 파일을 해석할 수 있도록 설정
            ]
        }
    ]
},
// 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
plugins: [
...

5. 루트경로의 SCSS 스타일 적용

5-1. 파일 수정 및 경로 수정

📑 main.scss

$color--block : #000;
$color--white : #fff;
body{
    background-color: $color--block;
    h1{
        color: $color--white;
    }
}

📑 main.js

import '../scss/main.scss'
console.log("webpack");

5-2 .모듈 설치

npm i -D sass-loader sass

두개의 모듈 설치

sass-loader : scss 파일 읽기
sass : 문법 해석

5-3. 모듈 연결 : webpack.config.js 파일 수정

📑 webpack.config.js

module:{
    rules:    [
        {
            test: /\.s?css$/, //1. 정규식 s? 를 추가하여 scss와 css 모두 읽을 수 있도록 설정
            use:[
                'style-loader',
                'css-loader',
                'sass-loader' // 2. 모듈 연결
            ]
        }
    ]
},

6. 공급업체 접두사 (Vender Prefix)

공급업체 접두사란 웹 표준 이아닌 특정 브라우저에서 사용가능한 접두사 css기술이다 .

위와 같은 접두사들을 각각 외워서 사용하기 어려울 수 있어 자동으로 생성해주는 모듈(패키지)이 있다.

6-1.모듈 설치

npm i -D postcss autoprefixer postcss-loader

세개의 패키지를 설치해준다.

postcss : 스타일 후 처리
autoprefixer : 공급업체 접두사
postcss-loader : 웹팩에서 동작할 수 있는 모듈

6-2. 모듈 연결 : webpack.config.js 파일 수정

모듈 내용에 postcss-loader 를 추가해준다.

※ 연결 순서도 중요하다.

📑 webpack.config.js

module:{
        rules:    [
            {
                test: /\.s?css$/, 
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader', // 1. 추가 
                    'sass-loader' 
                ]
            }
        ]
    },

6-3. package.json 수정

적용되는 브라우저관련 설정

📑package.json

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

6-4. '.postcssrc.js'파일 생성

📑 .postcssrc.js

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

7. babal

7-1. 모듈 설치

npm i -D @babel-loder

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

모듈 3개 설치

@babel/core
@babel/preset-env
@babel/plugin-transform-runtime

7-2. '.babelrc.js' 파일 생성

📑 .babelrc.js

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

7-2. 모듈 연결 : webpack.config.js 파일 수정

📑 webpack.config.js

module:{
        rules:    [
            {
                test: /\.s?css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader' 
                ]
            },
            { // 1. 추가
                test: /\.js$/,
                use:[
                    'babel-loader'
                ]
            }
        ]
    },

저작자표시