webpack 소개 및 환경 구축

Webpack

- webpack은 모듈 번들러이다.

- 여러 js 파일을 하나의 번들로 만들 수 있다.

- SCSS를 CSS로 돌릴 수 있다.

- EM6를 사용할 수 있다.

- 스타일로더와 CSS 로더등 다양한 로더를 사용할 수 있다.

- 코드 압축을 해주는 UglifyJsPlugin 등 다양한 플러그인등을 사용할 수 있다.

 

설치방법

- node.js를 설치한다. https://nodejs.org/ko/

- npm install -g webpack (npm을 이용하여 webpack을 설치한다)

- npm install --save-dev style-loader css-loader  (css loader)

- npm install --save-dev sass-loader node-sass webpack (scss loader)

사용방법

1. config 설정

webpack에서 사용할 설정을 기술한다.

// webpack.config.js
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.sass$/, loader: 'style!css!sass' }
    ]
  }
  
  plugins: [
   new webpack.optimize.UglifyJsPlugin({
     compressor: {
       warnings: false,
      },
    })
  ]
};

※ entry : 프로퍼티로 빌드되기전의 파일 경로 기입

※ output : bundle로 만들어질 파일의 정보를 명시

※ 로더 : test 영역은 파일들의 정규식 형태 기입, loader는 사용할 로더들의 이름을 명시

2. webpack 실행

- webpack

- webpack --watch       => 파일의 상태가 변경되면 자동 빌드

- webpack --config myconfig.js     => webpack.config.js를 사용하면 별도 기술을 하지 않지만 새로운 이름의 config를 사용하려면 다음과 같이 사용