이번에 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를 더 해본 뒤 포스팅 업데이트해야겠음.
[…] « Previous Post (adsbygoogle = window.adsbygoogle || []).push({}); […]