(Webpack 2) 트리 쉐이킹을 똑똑하게 해보자!

import {Router, Route, hashHistory} from 'react-router';

import Router from 'react-router/es/Router';
import Route from 'react-router/es/Route';
import hashHistory from 'react-router/es/hashHistory';

plugins: [
    // 배열의 첫 번째 요소로 배열(transform-imports 플러그인 정보를 담은)이 옴.
    // 그 배열 안에는 transform-imports 플러그인 임을 알려주는 요소가 첫 번째로 들어와있고,
    // 두 번째 요소로 객체가 들어오는데 이는 react-router 모듈에 대한 객체이다.
    // transform 프로퍼티에서 어떤 폴더를 기점으로 모듈들을 일일이 불러올지 기술했다고 보면 될 것 같다.
    // preventFullImport, 쓰지도 않는 녀석은 불러오지 않는 걸(트리 쉐이킹) true로 지정했다.
    ["transform-imports", {
      "react-router": {
        "transform": "react-router/es/${member}",
        "preventFullImport": true
      }
    }]
]

const webpack = require('webpack');
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: './',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      // 사실 아래와 같이만 써도 트리 쉐이킹이 된다.
      // compress: true
      compress: {
        // warnings: false, // 콘솔 창에 출력되는 게 보기 귀찮다면 요 놈을 주석 제거를 하면 된다.
        unused: true // 요 놈이 핵심
      },
      mangle: false,    // DEMO ONLY: Don't change variable names.(난독화)
      beautify: true,   // DEMO ONLY: Preserve whitespace (가독성 좋게 함)
      output: {
        comments: true  // DEMO ONLY: Helpful comments (주석 삭제 안 함)
      }
    })
  ],
  module: {
    // 웹팩 1에서는 loaders를 썼지만 2에선 rules
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        // 쿼리가 필요한 로더는 loader로 써줘야함.
        // 쿼리가 필요 없는 로더는 use로 써도 된다.
        // 웹팩 2에선 babel-loader와 같이 -loader 생략이 불가능해졌다.
        use: 'babel-loader'
      }
    ]
  }
};
// DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
// parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
// 위와 같이 로더 개발자를 위한 로그가 뜨는데 보기 싫다면 주석을 제거하면 된다.
// process.noDeprecation = true;

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, hashHistory} from 'react-router';

const Comp = () => <h2>하이</h2>;

render(
  <Router history={hashHistory}>
    <Route path="/" component={Comp} />
  </Router>,
  document.getElementById('app')
);