Webpack
4. 운영 모드의 도입
- 공식문서
- 실서버용과 개발용 앱은 설정이 각각 다르다
- webpack에서 제공하는 dev, prod 모드의 특징과 모드의 설정방법을 살펴보자.
- 실서버용 번들은 압축 및 난독화가 되어있음
- 개발용 번들은 그나마 좀 알아보기 쉬움
모드 사용 방법
명령어 :
webpack --mode=development
webpack.config.js :
module.exports = {
mode: 'development'
};
dev && prod 스위칭 예
dev와 prod의 config.js파일을 따로 두어서
만약, dev라면
npx webpack만 쳐서 번들링(webpack.config.js)
prod라면
webpack --config webpack.config.prod.js //로 명령어
혹은, 환경변수를 따로 두기
4. 로더 ★★★
js는 번들링 됐지만 css는 따로 불러오고 있다.
웹팩은 css조차도 번들링 해준다. 그리고 로더를 사용해서 불러 올 수 있다.
// style.css
body{
background-color: powderblue;
color:tomato;
}
<html>
<head>
<style></style>
</head>
<body>
<h1>Hello, Webpack.</h1>
<div id="root"></div>
<script src"public/index_bundle.js"/>
</body>
<html>
1) style-loader css-loader 설치
npm install --save-dev style-loader css-loader
댓글