[Webpack] 디렉토리에 웹팩 설치 및 기본 설정

 

※ 작업 환경 window, node.js

※ 사용 툴 : VS code

시작하기 전에, 반드시 node.js를 설치해주세요 (node.js 다운로드)

 

---

 

 

1. npm 설정

▶ vs code에 웹팩을 이용할 폴더 open → 터미널 오픈 (하단의 terminal 혹은 상단 메뉴바에 termianl → new termianl) 

// 프로젝트 폴더 터미널에 입력
npm init

▶ init를 입력하면 package-name을 설정하라고 뜨는데 enter를 누르면 자동으로 폴더 이름이 입력된다. (단, 한글은 인식하지 못하므로 한글일 경우 영어로 package 이름을 설정해줘야 한다.) 이후에 vsersion이나 description 등 다양한 설정이 나오는데 특별히 설정할 것이 없으면 enter를 계속 눌러주면 된다. 그리고 마지막에 Is this OK?라고 물어보는데 yes라고 입력해도 되고 그냥 enter를 눌러도 된다.

▶ 이 모든 과정이 끝나면 폴더에 package.json 파일이 생성된다.

 

 

2. webpack 설치

// 프로젝트 폴더 터미널에 입력
npm install webpack webpack-cli --save-dev

▶ 설치가 끝나면 node_modules 폴더와 package-lock.js 파일이 생성된다

 

 

3. html, js, css파일들이 들어갈 src 폴더 생성

▶ 프로젝트 폴더 아래 src 폴더를 만들어, html, js, css 등 소스코드를 넣어준다. (관리하기 편하기 위해 주로 이용)

▶ 폴더 구조 (웹팩설정 = 프로젝트 폴더명)

 

 

4. webpack.config.js 생성

▶ webpack이 해당 프로젝트 안에서 어떤 식으로 구상되어 실행될 것인지 정하는 파일

▶ 위치는 프로젝트 폴더 바로 아래(package.json 파일과 같은 위치)

▶ webpack.config.js 내용

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: `${__dirname}/dist`,
  },
};

▷ 우리가 프로젝트 내부에서 여러 js파일이나 css 파일을 생성해도 결국 최종적으로 webpack 이 확인하는 파일은 entry에 있는 js파일(index.js)입니다. webpack이 실행되면 해당 js파일(index.js)을 참고하여, webpack은 최종적으로 js파일을 만들게 되는데, 이 파일이 바로 output 안에 있는 main.js입니다. (참고로 이 파일은 dist라는 폴더에 저장되어집니다. dist폴더는 webpack를 실행해야 생기는 파일입니다.)

▷ webpack 설정 파일에 대한 자세한 정보를 기술해둔 사이트 링크를 걸어두니 더 알고 싶은 분들은 참고해주세요. 

▷ 현재 설정 상으로는 프로젝트 내부의 파일을 변경하게 되면, npx webpack으로 패키징을 해주고 실행해야 변경된 사항이 적용됨 → 번거로우니 자동화를 시작해봅시다.

 

 

5. 자동화하기 1

▶ webpack dev serve 설치

// 프로젝트 폴더 터미널에 입력
npm install --save-dev webpack-dev-server

▶ webpack.config.js 에 devServer 관련 코드 추가

module.exports = {
	entry: './src/index.js',
    	output:  { //... 생략 ...
    },
    
	devServer: {
    	static: './dist', //추가내역
  	}, //추가내역
  };

▶ Html webpack Plugin  설치

// 프로젝트 터미널에서 실행
npm install --save-dev html-webpack-plugin

▶ webpack.config.js에 html webpack plugin 관련 코드 추가

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

module.exports = {
  //..생략..
  devServer: {
    static: './dist',
  },
    plugins: [new HtmlWebpackPlugin({
      template: './src/index.html'
  })],
};

▷ src에 위치한 index.html 파일을 dist파일로 옮겨, 서버가 실행되면 index.html이 보이도록 설정하는 과정입니다. 만약 index.html이 아닌 다른 html 파일을 띄우길 원하신다면, 해당 파일 이름을 index.html 대신 적어주시면 됩니다. (단! 해당 파일이 src 바로 아래 있는 게 아니면 파일의 경로도 변경해주셔야 합니다)

▷ 최종 webpack.config.js 상태

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: `${__dirname}/dist`,
  },
  devServer: {
    static: './dist',
  },
  plugins: [new HtmlWebpackPlugin({
      template: './src/index.html'
  })],
};

▶ package.json파일의 scripts 영역에 아래 코드 추가

  "scripts": {
    "build": "wepback ",
    "start": "webpack serve --open",
    //.. 생략 ..
  },

 

 

6. 실행해보기

▶ 프로젝트 폴더 터미널에서 npm start 입력 → index.html 로딩 완료 ☞ 성공!

▶ 그러나, 여기서 아래와 같은 오류가 발생하신다면

webpack.config.js 파일에 해당 코드 추가

// 생략

module.exports = {
	mode:'development',
    entry: './src/index.js',
    //생략
 };

 

 

7. 최종 코드

▶ 브라우저에 webpack 테스트를 띄운 간단한 html 파일로, git저장소에 올려두었으니 확인해주시면 됩니다.

▶ gitignore 파일 안에 node_modules와 dist가 있습니다. 다운로드하여서 사용하실 땐 프로젝트 폴더 터미널에서 npm install를 해주세요.

https://github.com/Choi33/Basic_webpack

GitHub - Choi33/Basic_webpack

 

 

 

---

 

 

 

 

추가 자료 (참고한 웹팩 홈페이지)

1) 기본 설정

Getting Started | webpack

2) webpack dev server

Development | webpack

3) html webpack plugin

HtmlWebpackPlugin | webpack