(Webpack 2) 코드를 분할해보자!

import React from 'react';
import {render} from 'react-dom';

render(
  <h2>히히헤헤</h2>,
  document.getElementById('app')
);

const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/main.js',
    // 아래와 같이 수동적으로 서드 파티들을 다 추가해줘야한다.
    // 장점으로는 자기가 빼고 싶은 서드 파티만 지정할 수 있다는 점이다.
    // 자신의 앱과 벤더의 크기를 균형있게 맞출 수가 있다.
    vendor: ['react', 'react-dom']
  },
  output: {
    // entry에 존재하는 app.js, vendor.js로 뽑혀 나온다.
    filename: '[name].js',
    path: './dist/',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false, // 터미널 창에 출력되는 게 보기 귀찮아서 추가.
        unused: true // tree shaking
      }
    }),

    // 로더들에게 옵션을 넣어주는 플러그인이다.
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),

    // app.js에 들어갈만한 내용을 vendor로 빼주는 플러그인
    new webpack.optimize.CommonsChunkPlugin({
      // 위에 vendor와 통일시켜줘야한다.
      name: 'vendor'
    }),
    
    // 브라우저의 콘솔 창에 리액트를 프로덕션 모드로 빌드하라는 오류가 뜨는데 그걸 없애주는 플러그인
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              "env",
                {
                  browsers: ['last 2 versions', '> 10%', 'ie 9'],
                  // tree shaking
                  "modules": false
                }
            ],
            "react"
          ]
        }
      }
    ]
  }
};

// 로더 개발자를 위한 로그 제거
process.noDeprecation = true;

const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/main.js',
  },
  output: {
    // entry에 존재하는 app.js,
    // new webpack.optimize.CommonsChunkPlugin의 name 값인 vendor.js로 뽑혀 나온다.
    filename: '[name].js',
    path: './dist/',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false, // 터미널 창에 출력되는 게 보기 귀찮아서 추가.
        unused: true // tree shaking
      }
    }),

    // 로더들에게 옵션을 넣어주는 플러그인이다.
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),

    // app.js에 들어갈만한 내용을 vendor로 빼주는 플러그인
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      // 아래 부분이 핵심
      minChunks: function (module) {
        // this assumes your vendor imports exist in the node_modules directory
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),
    
    // 브라우저의 콘솔 창에 프로덕션 모드로 빌드하라는 오류가 뜨는데 그걸 없애주는 플러그인
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              "env",
                {
                  browsers: ['last 2 versions', '> 10%', 'ie 9'],
                  // tree shaking
                  "modules": false
                }
            ],
            "react"
          ]
        }
      }
    ]
  }
};

// 로더 개발자를 위한 로그 제거
process.noDeprecation = true;

import React from 'react';
import Link from 'react-router/es/Link';

const Comp = () => (
  <div>
    <h2><Link to="aa/bb/cc">하이</Link></h2>
  </div>
);

import React from 'react';
import Link from 'react-router/es/Link';

const Comp2 = () => (
  <div>
    <h2><Link to="/">바이</Link></h2>
  </div>
);

export default Comp2;

const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/main.js',
  },
  output: {
    // 요 놈은 저 위에 엔트리의 app에 대한 내용
    filename: '[name].[chunkhash].js',
    // 요 놈은 페이지 별 청크에 대한 내용
    chunkFilename: '[name].[chunkhash].js',
    path: `./dist`,
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false, // 콘솔 창에 출력되는 게 보기 귀찮아서 추가.
        unused: true // tree shaking
      }
    }),

    // 로더들에게 옵션을 넣어주는 플러그인이다.
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),

    // app.js에 들어갈만한 내용을 vendor로 빼주는 플러그인
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // this assumes your vendor imports exist in the node_modules directory
        return module.context && module.context.indexOf('node_modules') !== -1;
      },
      // 요 놈은 vendor에 대한 내용
      fileName: '[name].[chunkhash]'
    }),

    // 브라우저의 콘솔 창에 프로덕션 모드로 빌드하라는 오류가 뜨는데 그걸 없애주는 플러그인
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              "env",
              {
                browsers: ['last 2 versions', '> 10%', 'ie 9'],
                // tree shaking
                "modules": false
              }
            ],
            "react"
          ]
        }
      }
    ]
  }
};

// 로더 개발자를 위한 로그 제거
process.noDeprecation = true;

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/main.js',
  },
  output: {
    // 요 놈은 저 위에 엔트리의 app에 대한 내용
    filename: '[name].[chunkhash].js',
    // 요 놈은 페이지 별 청크에 대한 내용
    chunkFilename: '[name].[chunkhash].js',
    path: './dist',
    // HTML5의 History API를 쓰다보면 라우터가
    // http://localhost/aa/bb/cc 와 같이 뎁스가 깊어지는데
    // 그럴 때 js 파일은 localhost를 기준으로 잡아야하므로
    // 루트를 기준으로 잡아준 것이다.
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false, // 콘솔 창에 출력되는 게 보기 귀찮아서 추가.
        unused: true // tree shaking
      }
    }),

    // 로더들에게 옵션을 넣어주는 플러그인이다.
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),

    // app.js에 들어갈만한 내용을 vendor로 빼주는 플러그인
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // this assumes your vendor imports exist in the node_modules directory
        return module.context && module.context.indexOf('node_modules') !== -1;
      },
      // 요 놈은 vendor에 대한 내용
      fileName: '[name].[chunkhash]'
    }),

    // 브라우저의 콘솔 창에 프로덕션 모드로 빌드하라는 오류가 뜨는데 그걸 없애주는 플러그인
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),

    // htmlWebpackPlugin을 쓰면 html 파일 복사 및 js, css inject를 할 수 있다.
    // 물론 minify도 가능하다.
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              "env",
              {
                browsers: ['last 2 versions', '> 10%', 'ie 9'],
                // tree shaking
                "modules": false
              }
            ],
            "react"
          ]
        }
      }
    ]
  }
};

// 로더 개발자를 위한 로그 제거
process.noDeprecation = true;

const express = require('express');
const app = express();

// 루트 디렉토리(/)로 오면 dist 디렉토리에 있는 index.html을 불러옴.
// 서버 라우터일 거다. 아마도...
app.use('/', express.static(__dirname + `/dist`));

// 8080 포트로 서버 오픈
app.listen(8080, () => {
  console.log('Express listening on port', 8080);
});

// 클라이언트 라우터(일거다... 아마도...)인 react-router의 HTML5 History API를 사용하기 위함.
// http 메소드 중에 get을 사용해서 모든 라우터(*)로 접근할 경우에(요청할 경우에)
app.get('*', (req, res) => {
  // 요청(request)에 대한 응답(response)으로 dist 디렉토리의 index.html을 돌려준다.  
  // __dirname은 노드 js의 전역 변수인데 현재 디렉토리(풀 디렉토리, 절대 경로)를 반환하는 변수이다.
  res.sendFile(__dirname + '/dist/index.html');
});