Muscardinus
Webpack 설치 본문
728x90
webpack 설치
// 필요조건: package.json
npm install webpack webpack-cliwebpack -> webpack 그 자체
webpack -> 우리가 조금 더 webpack을 쉽게 다루기 위해서 필요하다.
우리가 wbpack을 사용하기 위해서는 2가지의 세팅이 항상 필요하다.
어디서 파일을 찾을 수 있는지와 어디에 결과물(bundle)를 놓을 것인가
이러한 세팅을 webpack.config.js에 작성한다.
module.exports = {
mode: 'development',
// 어디에서 부터 시작할것인지 -> entry
// default -> src/index.js
// 여러개의 entry point도 가능하다.
entry: './index.js',
output: {
// webpack이 적용된 파일의 이름
filename: 'bundle.js',
// 저장될 위치 -> full path 필요
// __dirname -> node에서 제공해주는 기본 기능으로 현재까지의 path를 제공해준다.
path: __dirname + '/dist',
},
// webpack에서 주기적으로 변화를 감지한다.
watch: true
};webpack 실행 방법
./node_modules/.bin/webpack혹은
// package.json
{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode=development" // 이럴 경우 webpack.config.json에서 mode가 불필요하다
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}package.json에서 scripts 안에 webpack을 실행하는 script를 넣으면 된다.
npm에서 자동으로 node_modules의 bin 디렉토리로 간다.
그리고 index.html을 만들어서 script에 dist/bundle.js를 넣으면
<!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" />
<title>Document</title>
</head>
<body></body>
<script src="dist/bundle.js"></script>
</html>완성된다.
추가사항
Loader
webpack은 js만 이해할 수 있다.
우리가 개발하기 위해서는 html, css 등 여러 파일을 추가적으로 사용하기에, 우리는 webpack으로 하여금 다른 종류의 파일들에 대해서 추가적인 작업을 할 수 있게 해줘야한다. 이럴 때 사용하는 것이 loader이다.
Plugins
webpack의 functionality를 확장해주는 역할이다.
예를 들면, 파일 삭제, server 시작, 애플리케이션 배포 등이 있다.
728x90
'FrontEnd/Webpack' Related Articles
more
Comments