[Webpack] entry의 파일을 읽고 modules을 적용한 뒤 output에 뺀다.

webpack 코드 작성할때 기억해 놓으면 좋은 순서

Mode

 

Entry

Module

Plugins

Output

기억하자 기억하자

제로초님 2-7 강의

 

const path = require('path');
const { webpack } = require('webpack');

module.exports = {
mode: 'development',
devtool: 'eval', //개발 때는 eval 배포할때는 hidden-source-map
resolve: {
extensions: ['.jsx', '.js'],
},

entry: {
app: './client',
},
module: {
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
target: {
browsers: ['> 5% in KR','last 2 chrome versions'], //지원하고자 하는 브라우저
// > 5% in KR은 한국에서 5%이상의 점유율의 브라우저를 뜻함.
},
debug: true,
}],
'@babel/preset-react',
],
plugins: [],
},
}],
},
plugins: [
new webpack.loaderOptionsPlugin({ debug: true }),
],
output: {
filename: 'app.js',
path: path.join(__dirname, 'dist'),
},
}

//entry의 파일을 읽고 거기에 modules을 적용한 후 output에 뺀다.