name | description |
---|---|
babel | es5 -> es6 |
.babelrc | configuration + compiler |
@babel/core | es5 -> es6 |
@babel/preset-react | react preset |
@babel/preset-env | browser compiler |
babel-loader | |
- | |
webpack | build one javascript file |
webpack.config.js | webpack configuration |
webpack-dev-server | live reloader |
webpack-cli | webpack command |
html-webpack-plugin | create html with output.jsW |
- | |
npm init | package.json |
react | react library |
react-dom | browser + dom + webapp |
webpack.config.js
const path = require('path') // core nodejs 모듈 중 하나, 파일 경로 설정할 때 사용
const HtmlWebpackPlugin = require('html-webpack-plugin') // index.html 파일을 dist 폴더에 index_bundle.js 파일과 함께 자동으로 생성, 우리는 그냥 시작만 하고싶지 귀찮게 index.html 파일까지 만들고 싶지 않다.!!
module.exports = { // moduel export (옛날 방식..)
entry: './src/index.js', // 리액트 파일이 시작하는 곳
output: { // bundled compiled 파일
path: path.join(__dirname, '/dist'), //__dirname : 현재 디렉토리, dist 폴더에 모든 컴파일된 하나의 번들파일을 넣을 예정
filename: 'index_bundle.js'
},
module: { // loader를 module object에 넣을 예정
rules: [
{
test: /\.js$/, // .js, .jsx로 끝나는 babel이 컴파일하게 할 모든 파일
exclude: /node_module/, // node module 폴더는 babel 컴파일에서 제외
use:{
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html' // 생성한 템플릿 파일
})
]
}
위의 설정들을 크게 살펴보자
name | description |
---|---|
path | 파일의 경로를 지정 |
HtmlWebpackPlugin | 컴파일 이후 index.html 파일을 생성 |
module.export | 출력할 모듈 |
- | |
entry | 컴파일 할 파일 |
output | 컴파일 이후 파일 |
module | 모듈의 컴파일 형식 |
plugin | 사용할 plugins |