[react] 웹팩이란 ?

나는 리액트를 접할때 유명한 리액트 블로거인 벨로퍼트님의 책을 보면서 create-react-app 을 사용해서 손 쉽게 리액트 개발환경을 구축하는 것을 먼저 배웠다. 

 

리액트 책을 볼 때 웹팩에 대해서 일정부분 설명이 있었으나 곧 이어 sass와 css_module을 사용을 하며 나에게는 웹팩은 sass와 css_module을 사용할때 만 건들고 더 이상은 건들지 않아도 되겠다는 개념으로 자리잡게 되었다. 그러나 오늘 채용공고에서 웹팩과 바벨의 이해가 있는 사람을 우대하는 것을 보고 집에가는 길에 웹팩에 관한 글을 읽게 되었다. 내용은 결국 여러 모듈화된 파일들을 하나의 번들파일로 만들어 이를 배포하게 해주는 것이였는데 중요한점은 "javascript외 다른 지원 파일들을 import 했을 때 사용하는 방법 이였다. " 보다보니 모르던 부분과 놓쳤던 부분들이 있었던 것을 알게 되었고 이를 웹팩 공식문서를 번역하며 간단하게 정리 해보려 한다. 

 

 웹팩이란 ?

웹팩은 번들러이다. 번들러란 하나의 파일에서 연결하고있는 무수히 많은 파일들을 하나로 묶어주어 한개의 파일로 새롭게 만드는 프로그램이다. 

 

모듈화된 파일들

 

왜 하나로 만들어 주어야 하나 ? 

 

파일들이 여러개로 분산되어 있으면 페이지에 들어갈 때 마다 서버는 자바스크립트파일들과 필요한 파일들을 보낸다. 이렇게 되면 페이지를 보여주기 위해 여러번 서버와 통신하게 되는데 네트워크 비용이 많이 들기에 비효율 적이기 때문이다.. 

 

 

Entry 시작 파일

엔트리는 해당 프로젝트가 시작하는 첫 파일을 가리키며, 웹팩은 어떤 다른 모듈이나 라이브러리들이 엔트리포인트에 의존하고 있는지를 찾아낸다. 기본 값은 ./src/index.js 로 되어있으며 webpack.config.js에서 이를 다른 파일로 교체할 수 있다. 

 

 

module.exports ={
	entry : './src/index.js' //기본 설정
}
   

 

공식문서를 확인해보니 entry포인트에 배열을 입력해주면 ' multi-main entry ' 이 되어 여러 엔트리 파일을 한개의 파일로 만들어 줄 수 있다고 한다. 

 

module.exports = {
  entry: {
    main: ['./bundle/app.js','./bundle/adminPage']
  }
};

 

엔트리에 프로퍼티를 추가하게되면 해당 프로퍼티만큼 파일이 만들어지는데 MPA(Multi Page Application) 를 만들 때 주로 사용한다. 

 

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

 

세가지의 다른 디펜던시 그래프를 가진 파일 3개를 만들 수 있다. 

 

Output 결과물 

 output은 웹팩이 여러파일을 번들링 하여 만든 결과물이다. 이 파일은 "./dist/main.js"가 디폴트이다. "./dist" 폴더는 파일을 가동시키는데 필요한 다른 파일들 까지 포함한다. 

 

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

 

 

이때 상단에 path 모듈을 불러온 것을 확인 할 수 있는데 이 "path"  모듈은 파일의 "path"를 다룰 때 사용합니다. 굳이 안사용하고 이렇게도 사용가능합니다. 

ouput : {
	path : '/dist',
    filename : output.js
   }

 

output.path 프로퍼티는 output이 저장될 경로를 뜻하고 output.filename프로퍼티는 저장될 파일이름입니다. 

 

zerocho사이트를 보니 아래와 같이 적으면 entry의 프로퍼티명이 filename으로 나온다고 합니다. 

 

ouput : {
	path : '/dist',
    filename : [name].js
   }

 

 

[hash] : 컴파일 마다 랜덤한 파일 명을 붙여줍니다 .

[chunkhash] : 파일이 달라질 때에만 랜덤값이 바뀝니다. 

 

loader 

공식문서에 따르면 웹팩은 자바스크립트와 JSON파일 밖에 읽지 못한다고 한다. "loader" 는 웹팩을 다른 타입의 파일들을 유효한 모듈로 바꾸고 이를 dependency graph에 추가 할 수 있게 도와준다고 합니다. 

 

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

 

로더는 한개의 "rules" 에서 "use" 와 "test" 프로퍼티를 가집니다. 

 

test는 정규표현식을 사용해서 모듈을 사용해서 처리할 파일형식을 작성합니다. use는 해당 파일형식을 처리할 모듈의 이름을 적어주시면 됩니다. 

 

use 와 test이외에 options{preset : "",},exclude 라는 프로퍼티가 있는데 options 프로퍼티는 해당 모듈의 프리셋을 정할 수 있다. .exclude 프로퍼티는 웹팩이 더 이상 추적하지 않는 폴더를 작성해준다. 

 

plugin

plugin을 사용하면 번들을 할 때 더욱 다양하고 효과적으로 번들링 할 수 있다. 예를 들어 파일을 난독화하는 플러그인을 사용하면 ouput을 읽기 힘들게 변경할 수 있다. 

 

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

 

모듈을 불러올때는 import 문이 아닌 require()를 사용해서 플러그인을 불러오고 plugin : [] 배열에 new생성자로 해당 모듈을 활성화 해주면 된다. 상단에 HtmlWebpackPlugin은 따로 분리하여 번들한 css파일과 js파일에 link태그와 script태그를 추가해줘야 한다. 이 플러그인은 이것을 자동화 해준다. 

 

실행

 

package.json 파일 script : {} 에 build : "webpack"이라고 설정하면 웹팩이 알아서 빌드 해준다. cra의 경우 미리 설정된 "react-script"를 통해 빌드 해준다. 

 

참고

 

공식홈페이지

 

https://webpack.js.org/

webpack

입문 및 실행예제

 

https://velog.io/@jeff0720/React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD%EC%9D%84-%EA%B5%AC%EC%B6%95%ED%95%98%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-Webpack-%EA%B8%B0%EC%B4%88

React 개발 환경을 구축하면서 배우는 웹팩(Webpack) 기초

 

웹팩 플러그인 소개 

 

https://jaeyeophan.github.io/2017/05/06/webpack-tutorial-2/

Webpack2, 입문 가이드 2편: Plugins

 

웹팩 플러그인 개발참조

 

https://infoscis.github.io/2018/01/24/develop-webpack-plugin/

Webpack Plugin 개발