반응형
패키지를 설치한다.
명령어: npm i -D html-webpack-plugin
webpack.config.js파일에서 해당 패키지를 가져와서 사용
// import
// 개발 화면을 띄워주기 위해서 패키지 가져오기
const HtmlPlugin = require('html-webpack-plugin');
// 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
plugins: [
// 위에 선언한 변수와 맞춰주어야 한다.
new HtmlPlugin({
// 패키지를 실행하면 기본적으로 동작할 html 파일 지정
template: './index.html'
})
]
코드 작성후 실행
명령어: npm run dev
만약 localhost 부분이 나오지 않는다면 아래 코드를 입력하여 개발서버를 지정해 줄 수 있다.
plugins 하단에 추가
devServer: {
host: 'localhost'
}
나온 url을 클릭하면 개발 화면으로 이동 된다.
종료하는 명령어는 ctrl + c이다.
화면 및 콘솔의 로그를 확인
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/main.js"></script>
<title>Document</title>
</head>
<body>
<h1>Hello Webpack!!</h1>
</body>
</html>main.js
console.log("Webpack!");반응형
'프론트엔드 > Bundler' 카테고리의 다른 글
| Webpack - module (0) | 2021.07.10 |
|---|---|
| Webpack - 정적 파일 연결 (0) | 2021.07.08 |
| WebPack 시작 (0) | 2021.07.08 |
| Parcel - CLI (0) | 2021.07.05 |
| Pacel - Babel (0) | 2021.07.05 |
