Webpack 명령어

• webpack : 웹팩 빌드 기본 명령어 (주로 개발용)
• webpack -p : minification 기능이 들어간 빌드 (주로 배포용)
• webpack -watch(-w) : 개발에서 빌드할 파일의 변화를 감지
• webpack -d : sourcemap 포함하여 빌드
• webpack –display-error-details : error 발생시 디버깅 정보를 상세히 출력
• webpack –optimize-minimize –define process.env.NODE_ENV=”‘production’” : 배포용

Webpack watch 옵션

• webpack 설정에 해당되는 파일의 변경이 일어나면 자동으로 번들링 다시 진행

  webpack --progress --watch
  

• 참고 : npm install --save-dev serve 한 후 아래 처럼 package.json에 명령어 설정 가능

  "scripts": {
    "start": "serve"
  }
  

개발자 도구 연동

• 브라우저에서 webpack으로 컴파일된 파일을 디버깅 하기란 어려움
• 따라서 아래와 같이 source-map 설정을 추가하여 원래의 파일 구조에서 디버깅 가능

  module.exports = {
    ...
    devtool: '#inline-source-map'
  }
  

Gulp 연동

• Gulp와 Webpack 모두 Node.js기반이기 때문에 통합해서 사용하기 쉽다. ```javascript var gulp = require(‘gulp’); var webpack = require(‘webpack-stream’); var webpackConfig = require(‘./webpack.config.js’);

gulp.task(‘default’, function() { return gulp.src(‘src/entry.js’) .pipe(webpack(webpackConfig)) .pipe(gulp.dest(‘dist/’)); }); ```

Hot Module Replacement

• 웹 앱에서 사용하는 JS 모듈들을 갱신할 때, 화면의 새로고침 없이 뒷 단에서 변경 및 삭제 기능을 지원
• 공식 가이드에는 React를 기준으로 사용법이 작성되어 있음