코드 스플리팅을 위한 webpack.config.js , 패키지들

이번에 webpack3, react router v4로 접하면서 코드 스플리팅을 위한 작업을 했다.
설치한 패키지들은 package.json으로 파악하고 설치하면 된다.

package.json 의 설치 모듈들

devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "express": "^4.15.3",
    "html-webpack-plugin": "^2.29.0",
    "webpack": "^3.3.0"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.2"
  }

webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
      entry : {
            app : [
                  './app.js'
            ],
            vendor : [
                  'react', 'react-dom', 'react-router-dom'
            ]
      },
      output : {
            filename : '[name].[chunkhash].js',
            chunkFilename : '[name].[chunkhash].js',
            path : __dirname  + '/output',
            publicPath: '/'
      },
      module : {
            rules : [
                  {
                        test: /\.js$/,
                        loader : 'babel-loader',
                        exclude : /node_modules/,
                        options : {
                              presets : [
                                          ["env",
                                          {
                                                browsers : [ 'last 2 versions', '> 10%', 'ie 9'],
                                                "modules" : false
                                          }],
                                          "react",
                                          "stage-0"
                              ]
                        }
                  }
            ]
      },
      plugins : [
            new webpack.LoaderOptionsPlugin({
            minimize: true,
          }),
          new webpack.optimize.ModuleConcatenationPlugin(),
            new webpack.optimize.UglifyJsPlugin({
                  compress : {
                        warnings : false,
                        unused : true
                  },
                  mangle : false,
                  beautify : true,
                  output : {
                        comments : true
                  }
            }),
            new webpack.optimize.CommonsChunkPlugin({
                  name : 'vendor',
                  minChunks: function (module) {
                   return module.context && module.context.indexOf('node_modules') !== -1;
                 },
                  fileName: '[name].[chunkhash]'
            }),
            new webpack.DefinePlugin({
                  'process.env' : {
                        NODE_ENV : JSON.stringify('production')
                  }
            }),
            new HtmlWebpackPlugin({
                  template : './index.html'
            })
      ]
};
process.noDeprecation = true;

일단 이렇게 설정하고 코드 스프라이팅 빌드 해보니 오류는 없어졌다.  실제 확인해보니 코드도 문제없이 생성되었다.
환경설정은 이렇게 해놓고 코드 스프라이팅과 리액트 라우터 v4를 더 해본 뒤 포스팅 업데이트해야겠음.

TOP