Skip to main content

Webpack v1.0 </doc>

Shin dongjin

Webpack

Webpack

웹팩(Webpack)은 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다.

웹팩은 애플리케이션을 구성하는 다양한 모듈들을 분석하고 이를 종속성 그래프로 표현합니다. 그런 다음 이 모듈들을 하나 이상의 번들로 패키징하여 정적 자산으로 생성합니다.
웹팩은 주로 웹 애플리케이션을 위해 사용되지만, 다른 환경에서도 사용할 수 있습니다. 예를 들어, Node.js 환경에서 서버 사이드 애플리케이션을 빌드할 때도 웹팩을 활용할 수 있습니다.
웹팩은 많은 기능과 유연성을 제공하여 모듈 시스템, 자원 관리, 번들 최적화 등을 효과적으로 처리할 수 있습니다. 웹 애플리케이션의 빌드 과정을 자동화하고 개발 효율성을 높이는 데 도움이 됩니다.


웹팩은 다음과 같은 핵심 개념과 기능을 제공합니다

  • 1. 엔트리(Entry) : 웹팩은 애플리케이션의 시작점(entry point)을 지정합니다. 엔트리는 웹팩이 애플리케이션의 종속성 그래프를 분석하기 시작하는 지점입니다.
  • 2. 아웃풋(Output) : 웹팩은 번들된 결과물을 출력하는 위치와 파일 이름을 설정합니다. 이는 웹 애플리케이션에서 사용되는 JavaScript 파일들을 포함한 정적 파일들을 의미합니다.
  • 3. 로더(Loaders) : 웹팩은 다양한 파일 형식을 처리하기 위해 로더를 사용합니다. 로더는 웹팩이 JavaScript가 아닌 파일들을 해석하고 변환할 수 있도록 도와줍니다. 예를 들어, Babel 로더를 사용하여 ES6+ 코드를 ES5로 변환할 수 있습니다.
  • 4. 플러그인(Plugins) : 웹팩의 기능을 확장하기 위해 플러그인을 사용할 수 있습니다. 플러그인은 번들 최적화, 환경 변수 주입, 번들 결과물에 대한 후처리 등 다양한 작업을 수행할 수 있습니다. 예를 들어, UglifyJsPlugin은 번들된 JavaScript 코드를 압축하는 데 사용될 수 있습니다.
  • 5. 모드(Mode) : 웹팩은 개발 환경과 프로덕션 환경에서 다른 기본 설정 값을 제공합니다. 모드 옵션을 통해 개발 중인지 또는 배포를 위한 최적화를 하는 중인지를 설정할 수 있습니다.

Webpack 설치

https://webpack.js.org/

1.1 Node.js 설치하기

웹팩(Webpack)을 시작하기 전에 node.js를 설치해야 합니다.

1.2 npm 초기화

npm init or npm init -y 
{
    "name": "game",
    "version": "1.0.0",
    "description": "game javascript",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

1.3 Webpack 설치

npm install webpack webpack-cli --save-dev

1.4 webpack.config.js 설정

npx webpack을 작성하면 파일이 번들링 됩니다. 
const path = require('path');

module.exports = {
    mode: 'production',    // 모드 설정 : production, development
    entry: {
        index: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'js/[name].js'
    }
}

1.5 webpack-dev-server 설정

npm install webpack-dev-server --save-dev 
{
    "name": "game",
    "version": "1.0.0",
    "description": "game javascript",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^5.83.1",
      "webpack-cli": "^5.1.1",
      "webpack-dev-server": "^4.15.0"
    }
}

1.6 HTML 번들러 설정

npm install html-webpack-plugin --save-dev 
"devDependencies": {
    "html-webpack-plugin": "^5.5.1",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0"
}

1.7 CSS 번들러 설정

npm install --save-dev style-loader css-loader 
"devDependencies": {
    "css-loader": "^6.7.4",
    "html-webpack-plugin": "^5.5.1",
    "style-loader": "^3.3.3",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0"
}

1.8 CSS 폴더 설정

npm install --save-dev mini-css-extract-plugin 
"devDependencies": {
    "css-loader": "^6.7.4",
    "html-webpack-plugin": "^5.5.1",
    "mini-css-extract-plugin": "^2.7.6",
    "style-loader": "^3.3.3",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0"
}