HEROPY
Tech
{{ scrollPercentage }}%

Webpack - 2 - Dev Server / Babel

js webpack bebel

이번에는 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
공지 이미지
{{ title }}
{{ eventPlace }}
{{ eventDate }}
오늘 하루 그만 보기