module.exports = {
mode: 'development' // 개발자 모드, production : 배포모드, none: 기복 최적화 옵션 해제 npx webpack --mode=development 이런식으로 빌드 시 cli에서 설정 가능
entry : 'index.js' //최초 진입점. 웹어플리케이션의 전반적인 내용이 담겨있는 부분을 해야함. 전역변수들이 선언되있는 곳이 적절해보임
, 여러개도 가능하다
output:{ //아래에 열거된 옵션 외에도 주석처리 , utf-8인코드,chunkformat 등 여러가지 설정 가능
path: //번들링 된 파일 경로
filename :'*.js' // 번들링 되는 파일의 이름
}
module: { //확장자 별로 loader와옵션을 선택해준다. 조건문도 가능하다.
rules: [ {
test: /.css/, use: ['css-loader'], } , { test: /\.(png|jpe?g|svg|gif|jp2|webp)/,
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
},
},
{
test: /\.(ico|woff|woff2|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader',
options: {
name: '[hash].[ext]',
limit: 10000,
},
}, {
test: /\.node$/,
use: 'node-loader' }],
},plugins: [ //외부 플러그인 사용 설정
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: true,
},
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'), // 아래 EnvironmentPlugin처럼 할 수도 있습니다.
}),
new webpack.EnvironmentPlugin(['NODE_ENV']), // 요즘은 위의 DefinePlugin보다 이렇게 하는 추세입니다.
// 기타 플러그인
new ExtractTextPlugin({
filename: 'app.css',
}),
] resolve: { //모듈을 해석하는 방식? 제대로 이해는 아직 못함
modules: ['node_modules'],
extensions: ['.js', '.json', '.jsx', '.css','.png'],
symlinks: false,
},
externals: [ //출력된 번들에서 의존성을 제외시킨다. nodeExternals() 처럼 묶음으로도 가능함.
'child_process', 'fs', 'axios', 'dgram', 'tls', 'slack-node','net','mailgun-js','loggly','os','https','http','assert','elastic-apm-node',nodeExternals() ],
