Webpack 2 - 설치 및 설정

웹팩을 사용하려면 npm 또는 yarn이 설치되어 있어야한다.( 자바스크립트로 이루어졌으니까 )

프로젝트로 디렉터리에서 yarn init을 실행해주면, package.json 파일이 생성된다.

웹팩을 다음과 같이 설치한다

#> yarn global add webpack

설치를 해놓고 계속 웹팩을 사용할 것이기 때문에 글로벌하게 설치해준다

설치 직후에 webpack 명령어를 사용하면 설정파일이 없다는 에러가 발생한다.

설정파일을 만들어서 전 포스트에서 언급했던 4가지 요소를 작성해줘야 모듈 번들을 할 수 있다.

#> touch webpack.config.js

# webpack.config.js

var path = require('path');
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename:'bundel.js',
    },
};

이렇게 작성하고 webpack을 실행하면 변환이 되고 파일이 생성되지만,

로더와 플러그인을 설정하지 않았기때문에 코드는 변환되지 않는다

자바스크립트 변환을 위한 로더로는 Babel이 있다.

다음과 같이 설치한다

#> yarn add babel babel-core babel-loader babel-preset-es2015 --dev

babel-core : 라이브러리 패키지. 바벨 프로젝트와 작업하기 쉬운 기능들을 갖고있다.

babel-loader: 웹팩에서 바벨을 사용하기 위한 로더

babel-preset-es2015: 바벨은 수많은 코드를 변환 시킬 수 있는데, 전체 라이브러리르 다운받아서 변환을 하는것을 비효율적.

preset은 특정 기능들만 포함된 것인데, 그 기능들만 변환할 수 있도록 선택해서 사용하게 만들어 놓은것.

es2015는 2015년도의 최신 기술들, es2016은 2016년도의 최신기술들 을 올드 자바스크립트로 변환해주는것이다.

es2015 = es6

--dev 옵션: package.json은 장고의 requirements.txt와 같은 역할을 한다.

babel은 개발자가 사용할 뿐 사용자에게는 없어도 되는 라이브러리들이다. 따라서 --dev옵션을 통해서

개발환경에만 필요한 패키지로 분류해놓는 것.

webpack.config.js 에 로더 설정하기

module:{
        rules:[
            {
                test:/\.js$/,
                loader: "babel-loader",
                options: {
                    presets:['es2015']
                }
            }
        ]
    }

장고의 url처럼 정규표현식을 사용해서 여러개의 룰을 만들 수 있다.

모듈 -> 룰 -> 테스트,로더,옵션

위의 내용은 .js파일들을 babel-loader를 사용하는데 프리셋으로 es2015(es6)을 지정해서 변환한다

웹팩은 로더가 여러개일때 위에서 아래로 적용하지 않고, 밑에서 위로 적용된다.

예를들어서 css-loader / postcss-loader / sass-loader 순으로 작성되어 있다면,

일단 sass-loader가 적용이되고, 변환된 css를 가지고 postcss-loader를 적용하는데,

post-css는 css에 브라우저별 호환성을 넣어주는 기능을 한다.

그 다음 css-loader가 적용되는 순으로 로더 기능이 동작한다.

Plugin 설정

var webpack = require('webpack');
plugins:[
        new webpack.optimize.UglifyJsPlugin()
]

webpack 에서 제공해주는 플러그인이 있고, yarn을 통해서 설치할 수 있는 외부 플러그인도 있다.

여기서는 webpack이 제공해주는 Uglify 플러그인을 사용했다.

플러그인은 각각의 로더를 통해 변환된 파일 전체코드를 변환시키는 부분이다.

어글리파이는 코드를 못생기게 만든다. 이는 쉽게 알아보지 못하도록 압축하고 복잡하게 코드를 작성하는 것이다.

webpack.config.js 전체코드

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename:'bundel.js',
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                loader: "babel-loader",
                options: {
                    presets:['es2015']
                }
            }
        ]
    },
    plugins:[
        new webpack.optimize.UglifyJsPlugin()
    ]
};

개발노트

이 블로그 검색

Webpack 2 - 설치 및 설정

댓글

댓글 쓰기