Babel이 컴파일러라면 Webapck은 번들러입니다.
번들러란?
번들러란 분리된 자바스크립트와 CSS모듈 코드를 브라우저에 최적화된 여러개의 파일로 결합합니다. React어플리케이션에 널리 사용되는 번들러에는 webpack과 Browserify가 있습니다.
$ npm i -D webpack webpack-cli html-webpack-plugin babel-loader
const path = require("path")
module.exports = {
mode: "development",
entry: "./src/index.js", //1. 진입점 설정
output: { //2. 번들링한 결과를 어디에 세팅할건지?
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js' //파일 이름 지정
},
module: {//3. 번들링 하면서 추가할 수 있는 rule 설정
rules: [{
test: /\.js$/, //모든 .js파일을 읽겠다.
use: 'babel-loader' //읽을 때 babel-loader를 참고하겠다.
}],
},
optimization: { //4. 압축기능
minimizer: [] //압축기능을 일시적으로 꺼놓음
}
};
상세설명
optimization: { minimizer: [] }
웹팩은 기본적으로 자바스크립트 파일을 압축하게 되어 있습니다. 그런데 babel이 제대로 일을 했는지도 봐야하기 때문에 일단 이 압축 기능을 잠시 꺼준 것입니다.
$ npx webpack
dist폴더 안에 bundle.js라는 이름으로 파일이 생성된 것을 확인할 수 있습니다.
이제 bundle.js 파일과 index.html파일을 하나의 파일로 붙여줘야합니다. 이런 일을 자동으로 해주는 플러그인이 바로 html-webpack-plugin
입니다.
const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
entry: "./src/index.js",
module: {
rules: [{
test: /\.js$/,
use: "babel-loader"
}],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html"
})
],
optimization: {
minimizer: []
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js" //파일 이름 지정
},
};
$ npx webpack
새로고침 없이 변경 내용을 런타임에 업데이트할 수 있도록 돕습니다.
$ npm i -D webpack-dev-server
Webpack.config.js
devServer: {
static: "./dist",
hot: true,
}
$ npx webpack serve