webpack 사용방법(1)

webpack을 왜 쓸까?

 

간단하게 보자

우리가 아래의 파일을 사용한다고 가정하자

 

main.js

about.js

...

 

bootstrap.min.css

fontawesome.css

main.css

...

 

개발할 수록 파일이 너무 많아진다.

접속하는 유저는 이 파일들을 각각 다운로드를 받아야한다.

이렇게 많은 스크립트나 css를 하나의 스크립트, 하나의 css로 합쳐준다.

 

그러면 웹사이트는 빠르게 작동한다.

왜냐면 브라우저는 하나만 다운로드하면 되니까!

 

 

설치 방법

1. npm 초기화

npm init -y

-y를 빼서 입력하면 직접 설정할 수 있다.

설치하면 package.json이 생성된다.

 

2. webpack 설치

npm install webpack webpack-cli --save-dev

- webpack cli : 컴퓨터에 일을 시킬 때 cli 기반으로 실행하기위해 필요하다.

 

설치하면

node_modules,

package-lock.json,

package.json에는 devDependencies{ ... }

들이 생성된다.

 

node_modules은

webpack을 이용해서 다양한 패키지 라이브러리 함수를 담고 있다.

 

package.json에 devDependencies는 

의존성있는 라이브러리들이 적혀있다.

근데 그것이 개발자 모드에서만 필요한 것!

서버에 올릴 파일이 아니다.

어디까지나 브라우저가 인식할 수 있는 HTML,JS,CSS를 편하게 묶어줄 때만 사용한다.

묶어준걸 웹에 올릴때는 deDependencies에 있는 것들은 필요가 없다.

그게 --save-dev다.

이 명령어가 devDependencies에 올리는 것이다.

 

즉 그림과 같이 왼쪽의 많은 것들을 웹팩을 통해 브라우저가 인식할 수 있는 오른쪽으로 바꾼다.

 

웹팩은

크로스브라우징

다른사람들이 쉽게 보지 못하도록 난독화

 

 

 

webpack.config.js

entry point : 여기에 작성한 것을 가지고 bundle을 해야한다.

 

근데 프로젝트를 진행할 때마다 bundle 명령어를 수행하면 너무 번거롭다. 

 

그래서

어디가 엔트리 포인트이고,  어느 파일에다가 어느 폴더에다가 어떤 파일을 만들어 줘

라는 설정을 만들어 주는 것이 webpack.config.js이다.

 

아래 이미지를 보고 쉽게 이해해보자!

 

 

그럼 우리도 번들해보기 위해 위 코드를 복사하자

const path = require('path');

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

 

그리고 root 디렉토리에 webpack.config.js 파일을 만들고 복사한 내용을 복사하자

 

require 명령어는 nodejs에서 외부 파일을 불러오는 방법임

import와 유사

 

path()

현재 path라는 기능을 불러온 것임

path는 nodejs에서 경로들을 다양한 방법으로 활용하게끔 편의기능을 제공한다.

 

1. normalize()

- 아래 경로를 nomalize로 짧게 처리해준다.

2. join()

3. resolve()

- 경로를 지정함과 동시에 최적화를 같이한다.

- 중간에 ../. 와 같은 문자열이 있는 경우 해당 경로를 수행해서 is/a 경로에서 is/로 바꿔준다.

 

 

설명은 여기까지로 하고, 이제 복사한 코드를 자세히 보자

const path = require("path");

module.exports = {
  mode: "development", // production(최종- 웹에 올릴 때 filename을 변경가능), development(개발),none
  entry: { index: "./src/index.js" }, // 모든 스크립트를 작성할 곳
  output: {
    //__dirname: 현재 폴더 경로 - 즉 경로만 출력하는 것(file 제외)
    //__filename: 현재 파일 경로
    path: path.resolve(__dirname, "dist"), //dist폴더에 bundle.js를 생성하고 설정
    filename: "bundle.js",
  },
};

 

주석에 간단하게 설명을 적었다.

 

 

webpack-dev-server

npm install webpack-dev-server --save-dev

- 서버에서 실행을 하기 위해 서버를 설치한다.

 

 

devServer:{
	static: "./dist"
}

- 위 코드를 추가해줘야한다

- webpack.config.js에 서버가 실행할 위치를 지정해준다.

 

우리는 JS와 html도 같이 묶어주고 싶다.

 

그러면 Html-webpack-plugin 플러그인을 설치해야한다.

html을 별도로 생성하는 것이다.

npm istall html-webpack-plugin --save-dev

 

webpack 공식사이트에서 사용 설명을 보자!

위 처럼 아래 코드를 추가해주자!

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


...

plugins: [new HtmlWebpackPlugin()],

근데 여기서 끝나는 게아니다!

공식사이트에 요거를 클릭해서 봐야한다.

new HtmlWebpackPlugin({
      template: "./src/index.html", //html 번들 전 파일
      filename: "./index.html", //번들 후 html
      hash: true, //모든 스크립트, css 캐시를 무효화(파일이 바뀔 때마다 화면에 반영해줌)
      showErrors: true, // 에러를 html에 보여준다.
    }),

이런식으로 입력해줘야한다!