mkfir webpack-demo
cd webpack-demo
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev
webpack.config.js 파일을 생성하고 아래와 같이 세팅해준다.
//webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
contentBase: './dist' //개발서버가 root가 아닌 dist 폴더를 인식
},
};
package.json 파일에 스크립트를 추가한다.
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bulid": "webpack",
"devserver": "webpack-dev-server --open --progress"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.33.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
},
}
스크립트를 수정할 때마다 빌드명령하는게 불편하기 때문에 wevpack-dev-server를 이용한다. package.json 에 등록한 스크립트 ‘devserver’를 실행시키기 위해서 npm run devserver 한다.
소스를 변경하면 개발서버가 변경을 감지해서 빌드한것 처럼 브라우저를 갱신 시켜준다.
[참고]
https://webpack.js.org/guides/getting-started/#basic-setup
[같이 읽기]
바벨설치하기 : http://blog.ujsstudio.com/?p=198