webpack

<colbgcolor=#2b3a42><colcolor=#fff> 웹팩 webpack
종류	모듈 번들러
라이선스	MIT 라이선스
언어	JavaScript
버전	5.90.1
링크	|

1. 개요

2. 사용

2.1. 설치

$ npm install -dev webpack

$ yarn add webpack --dev

2.2. 설정

#!syntax javascript 
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

webpack --config webpack.config.server.dev.js
webpack --config webpack.config.server.prod.js
webpack --config webpack.config.client.js

2.3. 설정 요소

#!syntax javascript
entry: {
  APage: './src/AScript.js',
  BPage: './src/BScript.js',
  CPage: './src/CScript.js'
};

#!syntax javascript
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

#!syntax javascript
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

• 설정파일 (추천하는 방법)
• 인라인
• CLI

#!syntax javascript
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

• 설정파일 (추천하는 방법)
• Node API

#!syntax javascript
module.exports = {
  mode: 'production',
};

3. Turbopack

4. 기타

• 원리는 JavaScript 코드를 파싱하여 AST(Abstract Syntax Tree)를 생성하여서, 각 모듈을 즉시 실행 함수(IIFE) 내에서 격리하여 네임스페이스 충돌을 방지하여 나눕니다. 그리고 의존성 그래프를 기반으로 모든 모듈을 단일 파일로 결합합니다.

• React의 CRA(Create-React-App) 사용하여 구성할 때 자동으로 설치된다.

• webpack 끼리 merge 할 수 있도록 도와주는 라이브러리도 존재한다. 이를 이용해 설정파일들을 경우에 따라 선택해서 번들링을 진행할 수 있다.

• 번들링이 된 파일에서 에러가 나는 부분을 찾기 위해서는 소스 맵(Source Map)을 설정할 수 있다. 이 소스 맵을 통해 원본 파일과 빌드 파일 사이에 위치를 알 수 있다.

• 나무위키에서도 사용한다. 다만 스크립트가 난독화되어있기 때문에 바로 눈치채기는 어렵다.

5. 같이 보기

• JavaScript
• Node.js
• npm