2020. 1. 14. 11:01ㆍwebpack
webpack - devServer
webpac -devServer은 webpack에서 제공해주는 node Server이다. CRA(create react App)을 해본 분이라면 알겠지만 yarn start명령어를 통해 실행하면 포트 3000번이 켜지는 것을 확인할 수 있다. 그래서 필자는 처음에 프론트인데 왜? 서버위에서 돌리지라는 의문을 가진 경험이 있었는데 이번에 공부를 하며 알 수 있었다.
정확히 devServer는 webpack에서 빠르게 prototype을 만들 수 있게 제공하는 nodeServer이다. 코드를 고칠 때 마다 빠르게 리로딩이 가능하다. 그래서 cra에서 코드를 고치면 빠르게 적용 된 것이다.
1. 설치 방법
yarn add --dev webpack-dev-server
2. 실행 방법
- terminal
// terminal에 아래 명령어로 실행 가능
webpack-dev-server --open
- package.json
//package.json에 아래구문 추가하여
// npm start 및 yarn start로 실행
scripts:{"start":"webpack-dev-server"}
3. 옵션
publicPath: 만약 개발 버전으로 진행하고 있으면 ./test.png를 바로 찾아서 적용할 수 있을 것이다. 그러나 배포 버전에서는 CDN이나 다른 지정된 위치로 이동할 수있다. 따라서 수동으로 url조작해줄 필요가 있다. 배포 버전이 아니라면 webpack으로 번들링된 파일의 위치를 넣을 수 있다.
publicPath:"http://localhost:3000"
//url이 아닌 경우
publicPath:"/dist/"
// 앞과 뒤에 / 꼭 붙여주어야 한다.contentBase: 서버가 로딩할 static 파일 경로 지정
//절대 경로로 변환한 것
contentBase:path.join(__dirname, "public")
// 비활성화
contentBase: falsecompress: 각종 파일들을 압축하여 웹 자원의 사이즈를 줄인다. 원 사이즈를 줄이는 것이 아닌 서버와 클라이언트가 데이터를 주고받을 때 압축을 하여 주고 받은쪽이 풀어서 확인하는 것을 반복한다.
gzip:true실습
1. 설정 파일 설치
yarn init
yarn add --dev webpack webpack-dev-server2. package.json scripts 부분 추가
"scripts": {
"start": "webpack-dev-server"
},3. index.html, index.js
- index.html
<html>
<head>
<title>Webpack Dev Server</title>
</head>
<body>
<div class="container">
hello
</div>
<script src="/dist/bundle.js"></script>
</body>
</html>
- app/index.js
var ele = document.getElementsByClassName("container")[0];
ele.innerText = "Webpack ";
4. webpack.config.js
이전과 비교해보면 output에 publicPath와 devtool, devServer가 추가된 것을 확인할 수 있다. 현재는 배포 버전이 아니기 때문에 public Path를 /폴더명/이런식으로 작성했다. 그리고 devServer가 켜질 때 port 9000번을 사용하도록 설정했다. 현재 사용중인 것이 아니라면 번호는 크게 상관없다.
source-map은 build 버전으로 압축을하여 실행했는데 에러가 나면 압축된 파일에서 어떤 부분이 에러가 났는지 확인하기 어렵다. 그래서 압축되기전 파일과 연결하여 에러가 났을 때 압축되기전 파일 중 어디부분이 에러가 났는지 확인할 수 있게 해준다.
const path = require("path");
module.exports = {
entry: "./app/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/"
},
devtool: "cheap-eval-source-map",
devServer: {
publicPath: "/dist/",
port: 9000
}
};
5. yarn start로 실행 한 후
http://localhost:9000으로 이동하면 Webpack이라고 나와있는 것을 확인할 수 있다. 그리고 index.js의 코들르 수정하면 webpack이 바로 핫픽스를 되는 것을 확인할 수 있다.
하지만 특이하게
devServer는 기존의 cli와 다르게 webpack이 실행되어도 직접적으로 bundling된 파일을 폴더, 파일 형태로 저장하지 않는다. 그래서 위 사진과 같이 특별히 dist 폴더가 없다. 우린 webpack.confiig.js에서 분명히 설정을 해주었는데 왜 없는 것일까? 이는 파일 형태로 추출되지 않고 memory형태로 브라우저에 올려 실행된다.
'webpack' 카테고리의 다른 글
| webpack middleware (0) | 2020.01.14 |
|---|---|
| webpack resolve (0) | 2020.01.11 |
| webpack plugin (0) | 2020.01.11 |
| webpack loader (0) | 2020.01.11 |
| webpack entry와 ouput (0) | 2020.01.11 |