webpack과 친해지기 step_2 ( webpack.config.js 파일 ) 작성중.

webpack.config.js 파일에 설정들을 추가 해 볼건데, 설정의 큰 흐름은 entry -> module -> output 이다.

"entry( 압축할 파일들 )에 module( 규칙들 )을 적용시켜 output( 결과 파일을 어디에 어떻게 저장할 지) 으로 출력한다"의 흐름으로 이해하면 된다.

1. 기본 설정

name - 설정 파일 이름을 지어주면되는데 이 설정에 대한 목적을 간단하게 적어주면 된다.

mode - 개발모드냐 배포모드냐를 말하는데, 개발 중엔 'development' , 배포 시엔 'production'으로 설정해주면 된다.  배포 모드로 변경 후 빌드를 하면 소스코드 압축 및 최적화가 진행된다. 

devtool - 소스맵을 생성할 지 말지 그리고 어떻게 생성할 것인지를 설정한다. 여기서 소스맵이란, 빌드를 통해 난독화된 소스를 원본 소스와 맵핑해 주는 역할을 하는데, 우리가 디버깅 시, 개발자도구를 통해 오류 위치를 찾아 본 경험이 있을 것이다. 배포를 하면 개발자 도구에 소스코드가 난독화가 되어 알아보기 힘든 상태가 되는데, 소스맵은 오류가 난 부분의 원본에서의 위치를 알려준다. devtool 및 소스맵에 대한 친절한 설명은  ehsangazar.com/source-maps-and-how-it-works-b3f93ca7ea5 이 글에 나와있다.

Source maps and how it works

옵션들과 각각 옵션 별 특징을 위의 블로그에서도 설명하긴 하지만, 웹팩 사이트는 한 눈에 보기 쉽게 표로 나와있어서 둘 다 보는 것을 추천한다.

webpack.js.org/configuration/devtool/

Devtool | webpack

module.expors = {
	name:'for-test',
    mode:'development'
    devtool:'eval'
}

 

2. entry 설정

entry는 압축할 파일들을 인풋해 주는 곳이라고 생각하면된다. 만약 아래와 같은 프로젝트가 있다고 치자.

app.jsx에서 TestComponent와 TestComponent2를 import해서 index.html에서 랜더링하려고 한다. 이 때, app.jsx 와  TestComponent와 TestComponent2는 webpack을 통해 하나의 파일로 압축될 필요가 있다.

이 경우, entry에는 이 세 컴포넌트를 넣어줄 수 있다.

{
	entry:{
    	app:['app.jsx', 'TestComponent.jsx', 'TestComponent2.jsx']
    }
}

그런데 만약 압축해야 할 파일이 수천개라면 그 수 천개를 모두 entry에 넣어주어야 할까? 다행히 웹팩은 import 관계를 파악해서 알아서 압축해주기 때문에 이미 import 된 파일은 굳이 entry에 넣지 않아도 된다.

그럼 위의 경우, app.jsx에서 나머지 두 컴포넌트를 import해서 가지고 있기 때문에 app.jsx만 entry에 넣어주어도 된다.

즉, 프로젝트의 진입점이 되는 파일을 이 곳에 넣어주면 된다.  

{
	entry:'./app.jsx'
}

 

3. module ( loader 라고도 한다 ) 설정

loader는 바벨이나 css-loader 같이 웹팩이 압축할 파일을 이해할 수 있도록 변환해 주는 라이브러리들에 대한 설정하는 역할을 한다. 만약 아래 index.js의 경우에는 .jsx와 .css에대한 loader가 필요하다.

//index.js

import React from 'react';
import ReactDom from 'react-dom';
import ClientComponent from './clientComponent.jsx';
import './assets/css/reset.scss';

console.log('HELLO!');

ReactDom.render(<ClientComponent />, document.querySelector('#root'));

//webpack.config.js

module.exports = {
	entry:{
    	app:['index.js','clientComponent.js']
    },
    module:{
      rules: [
      	{
          test: /\.jsx?/, // .jsx, .js 파일들을 대상으로 
          loader: 'babel-loader', //최신js문법을 옛날 문법과 호환되게 해서 
          						  //어느 브라우저에서든 돌아가게 하겠다.
        },
        {
          test: /\.scss$/, //.scss로 끝나는 파일들을 대상으로
          use: ['css-loader','sass-loader'] //sass-loader를 통해 scss를 css로 변환하고 웹팩이 css를 이해할 수 있도록 
                                            // css-loader를 적용하겠다. 로더는 오른-> 왼 순으로 적용
        },
      ]    
    }
}

rules는 모듈 즉 각 로더들에 대한 규칙을 정의하는 곳이다.

test속성엔 로더가 적용될 대상을 지정해 주면 되고, loader 혹은 use에는 사용할 로더를 적으면 되는데,

use와 loader의 차이는 하나의 로더이냐 여러개의 로더이냐에 따라 선택하면 된다고 한다.

 

4. ouput 설정

entry에 적은 파일들을 하나로 합쳐서 어떤 경로에 어떤 파일이름으로 저장할 것인가? 를 정의한다.

여기서는 노드에서 제공하는 path 모듈의 join 메소드를  사용할 것이기 때문에 path 모듈을 require 해준다.

path.join('apple', 'banana','orange') // apple/banana/orange/ 로 경로가 잡힘

 

__dirname은 현재 위치를 가르키는 노드의 전역 변수를 가르킨다. 따라서, 아래 설정은 현재 파일의 부모 폴더에 있는 dist 폴더(없으면 생성 됨)로 경로를 잡는다.

지정된 경로로 filename에 설정 된 이름으로 빌드 결과물을 생성하여 저장.

  output: { 
    path: path.join(__dirname, 'dist'), //현재 이 파일의 부모 폴더(lecture폴더)에 있는 dist폴더를 생성하고 이 곳으로 경로를 잡아라
    filename: 'app.js', //app.js라는 파일을 생성해라 
    publicPath:'/dist/', //path는 실제 경로, publicPath는 가상의 경로
  },//출력

아래 글 참고    

https://www.zerocho.com/category/NodeJS/post/5789e8d91c9e1ff02bdedad3

(NodeJS) Express 프레임워크

 

 

 

 

 

---

※아래 내용을 참고한 포스팅입니다. 

webpack.js.org/concepts/#loaders

Concepts | webpack

www.zerocho.com/category/Webpack"

Webpack"

inf.run/u44g

프론트엔드 개발자를 위한 웹팩 - 인프런