javascript의 모듈을 하나의 파일로 합치는(번들링) 역할
const path = require('path');
module.exports = {
name: "wordrelay-setting",
mode: "development", //실서비스 production
devtool: "eval",
resolve: {
extensions: [".js", ".jsx"]
},
entry: {
app: ["./client"] //다른 파일에서 불러오는 것은
}, //입력
module: {
rules: [{ test: /\.jsx?/, loader: "babel-loader", options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['last 2 chrome versions'],
},
debug: true,
}],
'@babel/preset-react',
],
plugins: ['@babel/plugin-proposal-class-properties'],
}, }]
},
plugins: [
new webpack.LoaderOptionsPlugin({debug: true}),
],
output: {
path: path.join(__dirname, "dist"),
filename: "app.js"
}, //출력
};
webpack은 entry의 파일을 입력으로 받아서
module의 도움을 받아
output의 경로와 파일 이름으로 출력한다.
module: webpack은 기본적으로 js, json만 해석 가능 다른 확장자의 파일을 해석하기 위해 module 사용
등록 안되어 있는 cli를 실행하는 방법은 2가지가 있다
Babel은 javascript의 버전이 다른 경우
하나의 버전으로 만들어 주는 역할을 한다.
webpack과 함께 쓰여 하나의 버전으로 javascript를 만들고
합칠 수 있게 한다.
하나의 js파일로 합치는(bundling) 과정을 아래와 같다.