Webpack으로 프로젝트 폴더 만들기

티스토리 뷰

지나가는 개념 정리

Webpack으로 프로젝트 폴더 만들기

U_pic 2022. 2. 23. 11:02

프로젝트를 하면서 웹팩을 본 적은 있지만 실제 내가 핸들링해본 적이 없다.

웹팩이라는 bundler에 대해 공부를 하면서 이번 기회에 webpack을 가지고 직접 build 가능한 프로젝트를 한번 생성해보고,

그 과정을 정리해보기 위해서 글을 쓴다.

기본 세팅

mkdir webpack-demo //실습 폴더 생성
cd webpack-demo
npm init -y //package.json 생성
npm install webpack webpack-cli --save -dev // 웹팩 라이브러리 설치
npm lodash //lodash 라이브러리 설치

위 명령어로 실습 폴더와 라이브러리를 세팅한다.

그러면 다음과 같은 폴더 구성으로 세팅이 완료된다.

다음으로 루트 경로에 index.html과 src/index.js를 아래 내용과 같이 추가한다

<!-- index.html -->
<html>
  <head>
    <title>Webpack Demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="src/index.js"></script>
  </body>
</html>

/* src/index.js */
function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

웹팩 빌드를 위한 세팅

웹팩 빌드와 빌드 결과물을 사용하기 위해 index.html 과 src/index.js에 코드 수정

<!-- index.html -->
<html>
  <head>
    <title>Webpack Demo</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- <script src="src/index.js"></script> -->
    <script src="dist/main.js"></script>
  </body>
</html>

/* src/index.js */
import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

웹팩 빌드 명령어 활용을 위해 package.json 파일에 명령어 추가

"scripts": {
	"build": "webpack --mode:development"
},

webpack.config.js 파일을 생성하고 아래 다음과 같이 추가한다.

var path = require('path');

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

modue.exports에 포함된 내용은 다음과 같다,

Entry

Entry에 명시된 파일을 기준으로 의존성 트리를 만들고, 하나의 번들 파일 (ex. js파일)을 만들게 된다.

Output

Entry에서 만든 번들링 결과를 어디에 어떤 파일로 보내줄지 세팅하는 단계.

현재 작성한 코드에서는 'dist/main.js' 파일로 번들링 결과가 이동한다.

Mode

none, production(default), development 중 옵션을 선택할 수 있고, 옵션에 따른 최적화 기능을 사용할 수 있다.

공식문서 링크

Loader

현재 실습에서는 사용하지 않았지만 웹팩에서는 js 뿐만 아니라 더 다양한 파일을 번들링 가능하다.

CSS를 예를 들어 아래 코드와 같이 style-loader, css-loader 패키지와 웹팩 세팅을 해주면 css 번들링이 가능하다.

Plugin

웹팩에게 추가적인 동작을 원할 때 필요한 패키지를 넣어주는 설정입니다.

예를 들어 빌드를 진행할 때 기존 번들 파일을 제거한 후에 다시 빌드하는 clean-webpack-plugin을 사용할 수 있습니다.

var path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new CleanWebpackPlugin("build.js")],
};

npm run build를 통해 웹팩이 파일을 번들링 하는지 확인한다.

# Reference

Getting Started | webpack

Learn how to bundle a JavaScript application with webpack 5.

webpack.js.org

웹팩 맛보기 | 웹팩 핸드북

웹팩 맛보기 튜토리얼 그럼 이제 웹팩을 가볍게 맛볼수 있는 튜토리얼을 진행해보겠습니다. 이번 튜토리얼로 웹팩을 실행할 수 있는 개발 환경을 구성하고 빌드 과정을 경험해볼 수 있을 것입

joshua1988.github.io

웹팩(Webpack) 기본 설정법 (Entry/Output/Loader/Plugins)

Engineering Blog by Dale Seo

www.daleseo.com

'지나가는 개념 정리' 카테고리의 다른 글

SPA (Single Page Application) (0)	2022.03.02
Transpiler 와 Compiler (0)	2022.02.23
Repository Pattern 이란? (0)	2022.02.08
비즈니스 로직이란? (0)	2022.02.08
SOAP API, REST API (0)	2021.09.02

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

소소한 코딩일지

티스토리 뷰