Webpack 1에서 2 마이그레이션 노트

Webpack 2 베타로 마이그 시도. 프로젝트 하나를 2 베타에 올려봤다. 아직 GA 아니라 레퍼런스가 많진 않아서 정리.

가장 큰 변화는 ES6 모듈 네이티브 지원. import / export를 webpack이 이해하고 tree shaking 가능하게 됨. 그리고 System.import (다이나믹 임포트) 문법 도입. 라우트 기반 코드 스플리팅에 유용.

기존 1.x config에서 가장 자주 걸리는 수정:

// 1.x
module.exports = {
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', query: { presets: ['es2015'] } }
    ]
  },
  resolve: { extensions: ['', '.js', '.jsx'] }
};

// 2.x
module.exports = {
  module: {
    rules: [
      { test: /\.js$/, use: {
          loader: 'babel-loader',
          options: { presets: ['es2015'] }
      }}
    ]
  },
  resolve: { extensions: ['.js', '.jsx'] }  // '' 빠짐
};

체크포인트:

• loaders → rules. 용어 정리됨
• loader: 'babel' 축약표기 제거. 풀네임 babel-loader 써야함
• query → options
• resolve.extensions에서 빈 문자열 제거
• DedupePlugin 제거. tree shaking + UglifyJS로 대체

tree shaking은 아직 효과가 제한적. Babel이 import를 require로 바꿔버리면 webpack이 해석을 못 해서 dead code 못 찾음. .babelrc에 "modules": false 명시 필요:

{ "presets": [["es2015", { "modules": false }]] }

베타라 문서가 안 따라오고 커뮤니티 지식도 적어서 삽질 꽤 함. 정식 나오려면 좀 더 기다려야 할듯. 그래도 dynamic import 쪽은 미리 적용하고 싶어서 계속 테스트 진행중.