이번에 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({}); […]