mode 값 넣기

공식 홈페이지에서 확인을 해보면

다음과 같이 3가지 mode를 입력할 수 있고, 원하는 mode를 선택하면된다.

const path = require('path'); //node.js에서 파일의 경로를 쉽게 핸들링 할 수 있게 도와주는 부품

module.exports = {
  mode: 'development',
  entry: './source/index.js', // 입구에 해당하는 파일 입력
  output: {
    path: path.resolve(__dirname, 'public'), //__dirname : 현재 webpack.config.js 파일이 위치하고 있는 경로를 알려주는 변수  // public 이라는 하위 경로에 최종적인 결과물을 갖다 놓으라는 뜻
    filename: 'index_bundle.js', //생성될 파일의 이름
  },
};

로더의 도입

위 이미지에서 확인할 수 있듯이 javaScript 뿐만아니라, css,png들도 번들러할 수 있다.

번들러에 넣지 않았을 때와 넣었을 때를 비교해서 확인해보자

public에 style.css를 추가해서 html에 style을 입한다고 하면, 다음과 같이 진행할 수 있다.

public 폴더에 styles.css 파일을 생성하고 그안에 내가 주고 싶은 styles을 준다.

body {
  background-color: powderblue;
  color: tomato;
}

그런 후, index.html로 가서 head 태그에 link로 style.css 경로를 입력해 주면 아래와 같이 style을 입힐 수 있다.

<html>
  <head>
    <link rel="stylesheet" href="./public/styles.css" />
  </head>
  <body>
    <h1>Hello, webpack</h1>
    <div id="root"></div>
    <script src="./public/index_bundle.js"></script>
  </body>
</html>

다만 여기서 아쉬운건, styles.css는 bundle에 묶이지 않았다는 것이다.

웹팩은 자바스크립트 뿐만 아니라, png 나 css 조차 번들링을 해준다.

css 번들링하기

css를 번들링해주는 것이 로더 이다.

웹 팩을 잘다룬다는 것은 로디를 얼마나 알고 있는가 로더를 얼마나 자유롭게 사용하는 가를 뜻하기도 한다.

공식홈페이지로 가보면 어떤것을 설치해야 적용할 수 있는지 확인할 수 있다.

공식 홈페이지에 들어가면 다음과 같이 설치할 수 있는 방법을 알려준다.

npm install --save-dev style-loader css-loader

공식홈페이지에서는 다음과같이 config.js를 어떻게 써야되는지도 나온다.

(경로는 Guides → Asset Management → Loading CSS 참조)

css-loader : .css 파일을 javaScript 파일로 변환해주는 역할

style-loader : javaScript 로 만든 파일을 웹페이지에 적용시켜주는 역할

로더란?

입력한 엣셋들을 로더에 통과시키면 그것들을 가공해서 우리가 원하는 아웃풋을 만들어 주는 일종의 가공공정

세팅방법은 webpack.config.js 파일안에

module을 생성
rules 생성
test : 로더에 해당되는 검출하는 코드를 넣는다.
use : test 조건에 해당하는 것들이 나오면, 다음을 실행

output 설정 (다양항 형태의 bundle 만들기)

entry 가 2가지 일때, 어떻게 하면 bundle 파일을 2개를 생성할 수 있을까?

test 진행을 위해 about.html 파일을 만들고, entry파일을 source/about.js라고 생성을 한다.

여라가지 형태의 output을 만들려면 어떻게 해야될까?

공식 홈페이지 확인해보기

지금까지 모든 애셋을 index.html 파일에 수동으로 포함했습니다. 하지만 애플리케이션이 커지면서 파일 이름에 해시를 사용하거나 다중 번들로 내보내기 시작하면 index.html 파일을 수동으로 관리하기 어렵습니다. 이 때 몇 가지 플러그인으로 이 프로세스를 훨씬 쉽게 관리할 수 있습니다.

이렇게 설명이 되었고, 예시로는

다음과 같이 진행하라고 나와있다. 근데우리는 이미 예시를 만들어 놓았으니, 다음 진행사항을 확인해보자.

entry 를 다음과 같이 각각 선언해주고, output에서 filiename에 [name]을 활용하면 다음과같이 outupt이 2개다 되는것을 확인할 수 있습니다.

플러그인 사용해보기

HtmlWebpackPlugin

[HtmlWebpackPlugin](<https://github.com/jantimon/html-webpack-plugin>)은 webpack 번들을 제공하는 HTML 파일 생성을 단순화합니다. 이 플러그인은 매번 컴파일에 변경되는 해시로 된 파일 이름을 가진 webpack 번들에 특히 유용합니다. 플러그인이 HTML 파일을 생성하도록 하거나 lodash 템플릿을 사용하여 나만의 템플릿을 제공하거나 나만의 로더를 사용할 수 있습니다.

Installation

npm install --save-dev html-webpack-plugin

설치한 이후에,

index.html, about.html을 source로 옮기고, 번들러를 로딩하는 코드를 삭제한다.

Basic Usage

플러그인은 script 태그를 사용하여 body에 모든 webpack 번들을 포함하는 HTML5 파일을 생성합니다. 적용은 아래와 같이 webpack에 플러그인을 추가하기만 하면 됩니다.

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

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

공식홈페이지에서 볼 수 있듯이,

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

선언해 주고,

  plugins: [new HtmlWebpackPlugin()],

추가해주면 된다.

새로 실행하기에 앞서 public 폴더안에 있는 기존 파일들을 삭제하고 싶을 때는,

rm ./public/. 을입력하면 public 안에 있는 모든 파일을 삭제해 준다.

참고

생활코딩

Developer's Workspace

webpack 공부하기 - 4