HEROPY
Tech
Webpack - 2 - Dev Server / Babel
{{ scrollPercentage }}%

Webpack - 2 - Dev Server / Babel

October / 2017

jswebpackbebel

이번에는 Webpack Dev Server에 대해서 알아보고,
ES6 이상의 문법을 사용하기 위해 Babel을 구성하겠습니다.

프로젝트 구성하기

$ npm init -y

아래와 같이 디렉토리를 구성하고 파일을 생성하세요.

webpack-test
  ├─src
  │  ├─js
  │  │  ├─app.js
  │  │  └─hello.js
  │  ├─scss
  │  │  ├─app.scss
  │  │  └─hello.scss
  │  └─index.ejs
  ├─package.json
  └─webpack.config.js

// package.json
{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack -d --watch",
    "prod": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1"
  }
}

// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
  entry: path.join(__dirname, '/src/js/app.js'),
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'app.bundle.js'
  },
  resolve: {
    extensions: ['.js']
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader'
          ],
          publicPath: '/dist'
        })
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hello Webpack Project!',
      minify: {
        collapseWhitespace: true
      },
      hash: true,
      template: path.join(__dirname, '/src/index.ejs')
    }),
    new ExtractTextPlugin('app.css')
  ]
};

<!-- index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div class="container">
        <h1>Hello Webpack!</h1>
    </div>
</body>
</html>

// app.js
require('../scss/app.scss');
require('./hello');

// hello.js
console.log('Hello Webpack!');

/* app.scss */
body {
  background: tomato;
}
@import 'hello.scss';

/* hello.scss */
.container {
  h1 {
    color: white;
  }
}

구성이 완료되었다면 Package를 설치합니다.

$ npm i

webpack-dev-server 설치하기

webpack-dev-server는 로컬에서 사용할 개발용 서버를 제공합니다.
이 기능을 사용하여 소스 파일을 감시하고 내용이 변경될 마다 번들을 다시 컴파일 합니다.
수시로 새로고침을 하지 않아 편리합니다.

$ npm i webpack-dev-server -D

dev 명령이 "webpack-dev-server"를 실행하도록 수정하세요.

// package.json
"scripts": {
  "dev": "webpack-dev-server",
  "prod": "webpack -p"
},

webpack.config.js의 내용으로 devServer속성을 추가합니다.

// webpack.config.js
module: {
  // ...
},
devServer: {
  contentBase: path.join(__dirname, 'dist'),
  compress: true,
  port: 9000
},
plugins: [
  // ...
]

contentBase: 정적 파일을 제공할 디렉토리 설정, 소스 파일을 감시하고 변경 될 때마다 번들을 다시 컴파일합니다.
compress: gzip압축 사용 유무
port: 포트 설정

Babel 설치하기

$ npm i babel-loader babel-core -D

// webpack.config.js
module: {
  rules: [
    {
      // ...
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: "babel-loader"
    }
  ]
},

exclude: 제외할 조건에 대해서 설정

.babelrc 생성

프로젝트 루트에 .babelrc 파일을 생성하여 설정을 만들고 일부 플러그인을 활성화 합니다.

webpack-test
  ├─src
  │  ├─js
  │  │  ├─app.js
  │  │  └─hello.js
  │  ├─scss
  │  │  ├─app.scss
  │  │  └─hello.scss
  │  └─index.ejs
  ├─.babelrc
  ├─package.json
  └─webpack.config.js

‘Env preset‘ 는 지원되는 환경을 기반으로 필요한 Babel 플러그인들을 자동으로 설정합니다.

npm i babel-preset-env -D

"presets"에 구성 옵션이 없으면("env") babel-preset-latest(babel-preset-es2015, babel-preset-es2016, babel-preset-es2017)와 동일하게 작동합니다.

// .babelrc
{
  "presets": ["env"]
}

이제 설정이 끝났으니 ES2015+ 문법을 사용합니다.

// app.js
import '../scss/app.scss';
import './hello';

$ npm run dev

HEROPY의 다른 글

Snowpack, 더 빠른 웹 개발을 위한 새로운 방식의 프론트엔드 빌드 도구
Snowpack은 번들러가 아닙니다! 더 빠른 웹 개발을 위한 최신의 프론트엔드 빌드 도구로, JavaScript의 ESM(ES Modules)을 활용해 기존의 Webpack, Rollup 그리고 Parcel 같은 무겁고 복잡한 번들러의 번들 소요 시간을 절약할 수 있습니다.
PixiJS와 Depth map으로 3D 이미지 만들기
PixiJS는 WebGL을 사용하는 고속 HTML5 2D 렌더링 라이브러리입니다. Canvas Fallback을 지원합니다. PixiJS와 Depth map을 사용해 이미지에 생명력을 불어 넣을 수 있습니다.
Postman에서 API 테스트 자동화
Postman에서 API 요청과 응답에 대한 테스트를 자동화할 수 있습니다.Reqres.in에서 제공하는 로그인 API를 사용합니다.RequestCollection참고 자료(References)RequestPostman에 로그인하고 새로운 Request 탭을 엽 ...
Jest와 Vue Test Utils(VTU)로 Vue 컴포넌트 단위(Unit) 테스트
Vue Test Utils(VTU)는 Vue.js 환경에서 단위 테스트를 하기 위한 공식(Official) 라이브러리입니다. Jest는 페이스북에서 만든 테스트 프레임워크로 Vue Test Utils에서 권장하는 테스트 러너입니다. 두 가지 오픈 소스를 이용해 Vue 애플리케이션의 테스트를 진행합니다.
공지 이미지
{{ linkName }}
이 내용을 72시간 동안 안 보고 싶어요!?