[React]webpack 설정하기

~~Edit~~

[React]webpack 설정하기

최근에 뜨고 있는 Webpack은 프론트의 테스트크를 자동으로 수행해주는 아주 고마운 녀석이다. 기존의 Gulp, Grunt가 가지지 못한 여러 장점들이 많아 프론트 개발자들이 많이 쓰고 있지만, 명성에 비해 쓰레기같은 공식 문서를 가지고 있다.(프론트 개발자들은 공감할 것.) 이번 글에서는 Webpack의 알짜배기에 초첨을 맞추어 고급 기능을 다뤄보고자 한다.

프론트 기술은 눈 깜빡할 새에 새로운 녀석들이 나온다. 그만큼 트랜드가 계속 바뀌는게 프론트 세상인데, 프론트를 공부하는 사람들은 이러한 트랜드 속에서 살아 남기 위해서 끊임없이 공부를 해야한다. 공부 해야할 양이 많아 질수록 새로운 기술에 대한 핵심을 이해하고 있어야하는데 두 가지 질문을 항상 마음 속에 품고 있어야한다. 첫번째는 “이것이 왜 존재할까?"이고 두번째는 “이 기술이 어떤 문제점을 해결해줄까?"이다. 두 가지 질문에 대답 할 수 없는 기술이라면 굳이 배울 필요는 없을 것이다. 따라서 Webpack를 이러한 관점에 대해 알아보자.

Webpack이란게 왜 있는것일까? Webpack을 한 단어로 표현하자면 코드 Bundler이다. 코드를 가져 와서 변환하고 Bundle 한 다음 새로운 버전의 코드를 반환한다.

그럼 이번에는 Webpack이 어떤 문제점을 해결해줄까? SASS 또는 LESS와 같은 CSS 전처리기를 사용한 적이 있다면 SASS / Less 코드를 일반 CSS로 변환해야 한다는 것은 알고 있을 것이다. TypeScript 나 다른 자바 스크립트 언어를 사용 해본 적이 있다면 변환 단계가 있다는 것을 알고 있을 것이다. Webpack이 정말 좋은 점은 다양한 종류의 코드를 목표로하는 것으로 변환 시킬 수 있다는 것이다. 코드를 작성하여 해당 변경 사항을 실시간으로 출력 할 수도 있다.

이번 글에서는 Webpack 구성을 매우 가볍게 다룰 예정이지만, 향후 좀 더 고급 주제를 다루어 보도록 하자.

위에서 언급 한 프로세스에 대해 다시 생각해 보자. 코드를 가져 와서 변환하는 단계에서 3 가지 주요 단계와 3 가지 주요 사항이 있다.

Webpack은 웹 어플리케이션의 시작 지점 또는 루트 JavaScript 파일을 바라보고 있어야 한다.

Webpack은 코드를 어떤 것으로 변환을 할 것인지를 알아야 한다.

Webpack은 새로게 변환한 코드를 저장할 위치를 알아야 한다.

사실 위의 3가지만 숙지하고 있다면 Webpack은 별게 아니다.

첫번째 해야할 일은 Webpack 구성을 포함 할 파일을 만드는 것이다. 이 파일의 이름은 Webpack이 인식 할 수 있도록 이름이 webpack.config.js로 정해져 있다. 이 파일은 프로젝트의 루트 리렉토리에 있어야 한다.

이제 webpack.config.js 파일을 만들었고, 이 파일이 Webpack의 구성을 나타낼 object를 제대로 내보내는지 확인해야합니다. 자바스크립트 모듈에 익숙하지 않다면 Preethi의 블로그 시리즈를 먼저 읽어보고 오자.

// In webpack.config.js
module.exports = {}

이제 위의 언급대로 코드로 변환해보자. 먼저, Webpack에 어플리케이션의 진입 지점을 알려주자.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ]
}

위에서 한 것은 객체에 entry 속성과 그 값을 정해준 것이다. 여기서 값이 왜 문자열이 아닌 배열인지 궁금할 수 있을 것이다. Webpack을 사용하면 어플리케이션에서 하나 이상의 entry 포인트를 가질 수 있기 때문에 더 많은 정보를 담기 위해서 배열을 사용했다. (물론 배열을 안 써도 되지만 습관을 위해 배열을 쓰자) 이렇게 하면 나중에 추가 시 쉽게 추가 할 수 있다.

여기까지는 Webpack에게 어디에서 시작해야 한다고 알려주었고, 이제 코드를 변형을 해야한다.이 변형에는 loader라는 것을 사용한다.

loader는 타켓 파일의 종류에 맞춰어서 준비하면 된다. TypeScript면 그거에 맞는 loader를 CoffeeScript면 그거에 맞는 loader를 사용하면 된다. 사용처에 맞게 loader를 설치할 것인데 npm을 사용하자. 이 글에서는 예제로 CoffeeScript를 변환 시킬 것이다. 터미널에서 다음과 같이 loader를 설치하자.

$ npm install --save-dev coffee-loader

이를 실행하면 coffee-loader가 package.json 파일의 dev 종속 파일로 저장된다. 그런 다음 webpack.config.js 파일을 반영시켜주자. 이를 위해 먼저 webpack.config.js에서 내보내는 객체에 모듈 속성을 추가한다.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: []
  }
}

loader 배열 내부에는 원하는 모든 loader를 넣을 것이다.

각 loader는 세 가지로 구성되어야 한다. 첫 번째는 특정 변환을 실행할 파일 유형이다. 예를 들어, 자바스크립트 파일에서 자바스크립트로만 변환할 수 있도록 하는 것이다. 다음은 변환 할 디렉토리를 포함하거나 제외해야하는 항목이다. 여기서는 node_modules 폴더의 모든 항목에 대해 변환을 실행하지 않으므로 node_modules 경로를 제외 값으로 사용하자. 마지막으로 실행하고자하는 특정 loader이다. 예로 들면 아래와 같다.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: [
      {test: /\.coffee$/, exclude: /node_modules/, loader: "coffee-loader"}
    ]
  },
}

위에서 눈여겨봐야 할 것은 정규식이다. test에 있는 / \. coffee $ / 을 사용하게 되면 Webpack이 .coffee로 끝나는 모든 확장 프로그램에서 coffe-loader를 실행하게 된다.

다음으로, exclude는 변환에서 제외시킬 것을 나타낸다. 앞서 말했듯이 node_modules 폴더를 변형하고 싶지 않기 때문에 제외한다. 마지막으로는 loader로 Webpack에게 test의 정규식과 일치하고 exclude에 없는 모든 경로에서 실행될 변환을 지시한다.

만약 여러 loader를 추가할려면 npm으로 loader를 설치하고 loader 배열에 추가해주면 된다.

이제 마지막 단계로 새로운 변환 된 코드를 출력해야 하는 위치를 지정해주자.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: [
      {test: /\.coffee$/, exclude: /node_modules/, loader: "coffee-loader"}
    ]
  },
  output: {
    filename: "index_bundle.js",
    path: __dirname + '/dist'
  },
}

위의 코드를 보면 filename은 새로운 변환 된 코드가 포함 된 Webpack이 만들 파일의 이름이다. path는 새 파일 이름 (여기서는 index_bundle.js)이 배치 될 디렉토리이다. 참고로 __dirname는 현재 실행 중인 스크립트의 상위 디렉토리 이름이다.

이제 Webpack이 실행 시키면, 코드가 변형되어 ourApp / dist / index_bundle.js에서 참조할 수 있게 된다. 이제 HTML 파일이 index_bundle.js를 참조하도록 해보자. 일반 앱의 일반적으로 구조는 다음과 같을 것이다.

/app
  - components
  - containers
  - config
  - utils
  index.js
  index.html
/dist
  index.html
  index_bundle.js
package.json
webpack.config.js
.gitignore

보통 개발 중인 코드는 app 폴더에 두고 변형 후 배포에 사용할 코드는 dist 폴더에 있다. 여기서 한가지 문제점이 생기는데 app 폴더에있는 index.html을 변경할 때이다. 브라우저가 실제로 사용하게 될 index.html 파일은 dist 폴더 내의 파일이기 때문에 app 안의 html 파일을 옮겨주어야 한다.

이를 위해 두가지 방법이 있는데, 첫번째 방법은 두 개의 index.html 파일을 관리하는 것이다. app에 있는 파일을 변경할 때마다 dist에 있는 파일로 직접 복사하는 것이다. 하지만 이 방법은 너무 무식한 방법이다.

두 번째 옵션은 Webpack이 실행될 때마다 /app/index.html이 /dist/index.html에 복사되도록하는 방법이다. 첫번째 방법보다 훨씬 깔끔하고 손이 덜 가는 방법이다.

두번째 일 Webpack tool에 이미 존재한다. 바로 html-webpack-plugin이다. npm으로 마찬가지로 설치해주자.

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

우선, HTMLWebpackPlugin의 새 인스턴스를 만든 후 세 가지를 지정해야 한다. 먼저, 새로 생성 된 파일이 어떻게 보이길 원하는지에 대한 템플릿을 제공해야한다. 두번째는, 파일 이름을 지정하거나, 생성한 새 파일을 호출합니다. 셋번째는 WebpackPluginConfig로 통해 변환 된 코드의 출력 파일 이름을 감지시키는 것이다, (여기서는 index_bundle.js). 그런 다음 또는 에 스크립트를 삽입해야한다. 새로 생성 된 index.html 파일에 injection으로, 스크립트를 head 또는 body에 삽입하면 된다.

정리하면 아래와 같다.

// In webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: [
      {test: /\.coffee$/, exclude: /node_modules/, loader: "coffee-loader"}
    ]
  },
  output: {
    filename: "index_bundle.js",
    path: __dirname + '/dist'
  },
  plugins: [HTMLWebpackPluginConfig]
};

파일의 맨 위에 HtmlWebpackPlugin의 새 인스턴스를 만들고 요놈은 세 가지 옵션을 제공한다. template은 앱 디렉토리에있는 일반 index.html 파일을 가리킨다. filename은 index.html으로 기존 파일 이름과 동일하게 지었다. inject는 loader의 출력 파일 (index_bundle.js)의 이름을 참조하는 스크립트를 삽입하여 새로 생성 된 html 파일의 본문에 삽입한다. 마지막으로 작성한 HTMLWebpackPluginConfig 변수를 webpack config의 플러그인 배열에 항목으로 추가한다.

이제 Webpack을 실행하면 dist 폴더 안에 두 개의 파일이 생긴다. index_bundle.js 와 index.html가 생겼을 것이다. index_bundle.js는 entry 코드를 가져 와서 loader를 통해 실행 한 결과이다. index.html은 HTMLWebpackPluginConfig를 거쳐 만들어진 파일이다.

dist의 내부에 새로 생성 된 index.html 파일이 어떻게 생겼는지, app 폴더 안의 index.html 와 비교해보자.

app/index.html


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Apptitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>
  <div id="app">div>
body>
html>

dist/index.html


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Apptitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>
  <div id="app">div>
  <script src="index_bundle.js">script>
body>
html>

두 파일의 차이점은 dist (HTMLWebpackPlugin으로 생성된 파일)에 index_bundle.js를 가리키는 script 태그가 있다는 것이다. 다시 말하지만 HTMLWebpackConfig가 Webpack에서 새로 생성 된 파일의 출력 파일 이름을 감지하고 새로 만든 index.html 파일의 스크립트로 자동 추가한 것이다. 위의 index.html 파일에서 볼 수 있듯이 body에는 가 있다. Webpack 설정에서 출력을 test.js로 변경했다면 새로 생성 된 index.html 파일의 body 안에 가 생겼을 것이다.

이제 거의 다 끝났다 마지막으로는 Webpack에 실제로 실행하는 방법이다. Webpack이 설치되어 있지 않았다면 다음과 같이 설치해주자.

$ npm install -g webpack

Webpack을 설치를 하면 Webpack CLI에 접근 할 수 있다. (만약 local에 설치했다면 npm으로 실행시켜줘야 한다.)

어플리케이션의 루트 디렉토리 (여기서는 webpack.config.js의 위치)에서 Webpack을 터미널로 실행할 수 있다. 실행 시 Webpack 설정이 한 번 실행된다. 하지만 파일이 여러번 수정될 경우마다 Webpack을 매번 실행 시켜줘야하는데 그러기에는 너무 귀찮다. Webpack은 watch라는 기능을 제공하는데 파일이 변경 될 때마다 실시간으로 Webpack을 실행 시켜주는 기능이다.

$ webpack -w

배포 단계로 내놓을려면 다음을 실행 시 변환과 코드 축소가 실행된다.

$ webpack -p

사실 Webpack만 보고 왔다면 여기까지 해도 된다. 하지만 최종 목표는 React 관리를 Webpack으로 하는 것이기 때문에 Babal이라는 것을 loader로 추가해야 한다.

Babel.js는 자바스크립트를 컴파일 도구인데, Webpack을 사용하면 바벨이 특정 변환 자체 인 동안 코드에서 어떤 변환을 수행할지 지정할 수 있다. React의 관점에서 바벨은 JSX 를 실제 JavaScript로 변형 할 수 있게 한다. Babel이 좋은 점은 JSX -> JS 변형 외에도 많은 용도로 사용할 수 있다는 것이다. Javascript도 놀랍게도 버전들이 존재하는데 최신 Javascript랑 우리가 알고 있는 Javascript랑은 차이점이 매우 많다. 이에 따라 브라우저가 최신 Javascript를 못 따라오는 현상이 발생했는데 이를 Babel이라는 놈이 바로 잡아주는 것이다. 최신 JavaScript (ES2015, 2016 등)을 브라우저가 알고 있는 Javascript로 변환 시켜 브라우저가 이해할 수 있도록 해준다.

babel 설치도 npm으로 해주면 된다. babel은 여러 모듈로 구성되어 있기 때문에 설치 전에 몇 가지를 설치해야 한다.

$ npm install --save-dev babel-core babel-loader babel-preset-react

babel-core는 babel 자체이고, babel-loader는 사용할 Webpack loader이며, babel-preset-react는 JSX -> JS 변형을 도와준다.

위의 세가지 모듈을 Webpack에 추가해줘도 되지만 굳이 그럴 필요가 없다. babel 설정을 위해 별도의 파일로 관리하면 된다.

먼저 webpack.config.js 파일이 있는 루트 디렉토리에 .babelrc 파일을 만들어주자.

{
  "presets": [
    "react"
  ]
}

여기서는 babel 변환이 실제로 만들어 내는 babel loader에 지시하는 것이다. 좀 전에 babel-preset-react를 설치해줬기 때문에 react로 설정해주면 된다.

이제 babel-loader를 webpack.config.js의 loader에 추가해주면 된다.

// In webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

Genius Project

Jaewon Kwon

[React]webpack 설정하기

[React]webpack 설정하기