728x90
1. npm init -y
파일이 만들어짐.
2. npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
3. package.json에서
script 속성에 추가
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev" : "webpack server"
}
4. index.html 파일 생성 후 내용 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack Dev Server</title>
</head>
<body>
<!-- 빌드 결과물이 정상적으로 로딩되면 아래 div 태그의 텍스트가 변경됨 -->
<div class="container">
TBD..
</div>
<!-- HTML Webpack Plugin에 의해 웹팩 빌드 내용이 아래에 추가됨 -->
</body>
</html>
5. 프로젝트 레벨에 index.js 파일 생성 및 아래 내용 추가
var div = document.querySelector('.container');
div.innerText = 'Webpack loaded!!';
6. 웹패 설정 파일 webpack.config.js 만들고 아래 내용 추가
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'none',
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
port: 9000,
},
plugins: [
new HtmlWebpackPlugin({
// index.html 탬플릿 기반으로 빌드 결과물을 추가해줌.
template: 'index.html',
})
],
};
7. 명령어 창에 npm run dev
8.
html에 따로 js를 선언 해주지 않아도, js 파일이 잘 받아오는 것을 확인 할 수 있다.
js에서 지정해준 class에 글자가 바뀐다.
