[ES6] 부록. ECMAScript 2015 개발환경 Setting with Webpack, ESLint

ECMAScript 2015 개발환경 Setting with Webpack and ESLint

ES6 문법으로 자바스크립트 코드를 작성하는 것이 간결하지만, 현재 모든 브라우저에서 완벽하게 ES6 문법을 지원해주지 못하고 있다. 그렇기에 개발자들은 ES6로 작성된 코드를 이전의 문법인 ES5 문법으로 transpile하여 배포해야하는 경우가 발생했다. 이를 도와주는 것이 babel 이라는 npm이 있다. 하지만 여기서 한 발짝 더 나아가 bundle 기능까지 함께 제공하는 ( 원래 주가 bundle 기능이다. ) webpack을 활용하여 transpile 하자. webpack은 이 두 가지 기능 이외에도 정말 다양한 기능을 갖고 있다. 또한 ESLint를 이용하여 보다 우아한 ES6에 맞는 자바스크립트 코드를 작성하자. ESLint 또한 Webpack을 통해서 preload 할 수 있다.

ESLint란?

>> ESLint 관련 포스팅 이동 >>

Webpack 이란?

>> Webpack 관련 포스팅 이동 >>

사전 설치

babel-loader 

babel-core

babel-preset-es2015

eslint

eslint-loader

webpack

webpack-dev-server 

webpack.config.js 파일에 설정을 작성해준다.

webpack.config.js code>>

var webpack = require('webpack');
 
module.exports = {
    devtool: 'source-map',
    entry: './entry.js',
    output: {
        path: './',
        filename: 'bundle.js'
    },
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                loader: 'eslint',
                exclude: /(node_modules|bower_components)/
            }
        ],
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /(node_modules|bower_components)/,
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
}

코드 해석>>

devtool: source-map

오류가 발생했을 때 개발자 도구에서 오류가 발생한 지점을 잡아준다.

entry: ‘./entry.js'

자바스크립트 앱이 시작되는 첫파일이다.

이 파일을 기점으로 앱을 정의하고 모듈을 불러온다.

만약 entry가 object 형태로 여러 파일들이 설정되었다면,

최종 번들되는 파일은 여러 개의 번들 파일이 생성된다.

output: { … }

output은 번들된 결과 파일을 어디에 저장할 지 결정하는 부분

path 저장할 장소, filename 저장할 파일의 이름,

위 entry에서 여러 파일들을 설정했다면, filename을 설정할 때,

[name]이라는 변수를 사용해 번들되는 파일들을 구분해야 한다.

module: {

     loaders: [

          { … },

          { … }

     ]

}

설치한 npm들을 load할 수 있다.

plugins: [

     

]

webpack에 존재하는 플러그인을 추가할 수 있다.

+

devServer: {

     port: 9999,

     contentBase: 

     inline: true

}

webpack-dev-server를 사용하기 위한 설정을 추가할 수 있다.

terminal

webpack

: webpack 실행

webpack --watch

: webpack 에서 파일의 상태가 변경되면 자동으로 빌드

webpack --config myconfig.js

: 사용자 정의 webpack 설정 파일을 참고하여 webpack 실행

webpack-dev-server

: webpack을 실행시켜서 bundle 된 

웹팩을 작동시키는 방법은 하나의 파일을 진입점으로 지정하는 것이다.(entry)

이 파일은 트리의 루트가 된다. requrie에 의해서 다른 파일들이 트리에 추가된다.

package.json 파일에 약간의 설정을 통해서 빠른 빌드를 할 수 있다.

"scripts": {
     "build": "webpack —config webpack.config.prod.js",
     "dev": "webpack-dev-server —config webpack.config.dev.js"
}

npm run build

npm run dev

end