티스토리 뷰
Webpack? (Review)
자바스크립트, HTML, CSS, 이미지와 같은 여러개의 assets (js, css,png,jpg 등)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러로 의존성이 있는 모듈을 취하여 해당모듈을 대표하는 정적 자산들을 생성
프로젝트 상단에 webpack.config.js만들기
webpack 번들링하는방법 2가지
| 옵션 | 설명 |
| --mode | 웹팩 실행모드, 현 포스팅에서는 개발버전인 dev or development를 지정 |
| --entry | 엔트리 포인트(시작점) 경로를 지정 |
| --output | 번들링한 하나의 결과물이 위치하는 경로 |
1) webpack.config.js파일을 사용하여 번들 설정 관리하기
webpack.config.js
const path = require("path");
module.exports = {
mode : 'development',
entry: {
main: "./src/app.js"
},
output: {
filename: "[name].js",
path: path.resolve("./dist")
}
};module.exports 내 설정
context : webpack이 번들 빌드를 시작하는곳, context는 엔트리 파일을 포함하는 디렉터리에 대한 절대경로
name : webpack 이름
mode : development
entry : 입력파일 // 파일목록 적기
module : Loader 설정
plugins : 추가 작업 설정
output : 출력 파일
mode : 개발/운영 선택
-> 순서대로 입력파일을 받아서 module(Loader)과 plugins을 적용하여 output을 만든다음 개발 혹은 운영에 배포함
Development와 production의 빌드
Development환경? 강력한 소스매핑, 라이브 리로딩, hot module replacement
Production? 로드 시간을 줄이기 위해 번들 최소화, 가벼운 소스맵 및 애셋 최적화 초점
Production & Development 중복 설정하기 위해 "공통"설정 필요 --> webpack-merge
$ npm install --save-dev webpack-merge
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};
webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
});
webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
});
package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},npm script를 등록할때 노드 모듈의 명령어를 쓰지않고 webpack만 설정해도 프로그램에 있는 노드 모듈만 사용해도 찾음. 기본 config 파일인 webpack.config.js를 사용함.
webpack은 시작점을 찾아서 하나의 파일로 번들링해줌
2) 매번 옵션으로 관리하기
src/app.js
import * as math from './math.js';
math.sum(1,2);
src/math.js
export function sum(a,b){return a+b;}
$ node_modules\.bin\webpack --mode development --entry .\src\app.js --output-path dist
Hash: b8db1036b79d90b2e7cd
Version: webpack 4.46.0
Time: 52ms
Built at: 2021. 12. 30. 오후 2:50:29
Asset Size Chunks Chunk Names
main.js 4.8 KiB main [emitted] main
Entrypoint main = main.js
[0] multi ./src/app.js 28 bytes {main} [built]
[./src/app.js] 50 bytes {main} [built]
[./src/math.js] 39 bytes {main} [built]
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">
<title>Document</title>
</head>
<body>
<script type="module" src = "./src/app.js"></script>
</body>
</html>
-> 변화 모든 브라우저에서 다 돌아감
<script src = "./dist/main.js"></script>
webpack help
$ node_modules\.bin\webpack --help
출처
1. https://webpack.kr/guides/production/
2.
'Programming > React' 카테고리의 다른 글
| [React] 제어 컴포넌트& 비제어 컴포넌트 (controlled components & Uncontrolled Components ) (0) | 2022.09.02 |
|---|---|
| [React] Webpack이란? (0) | 2022.06.30 |
| [React] 성능최적화 1. 웹 성능 결정 요소 - 로딩 성능/ 렌더링 성능 (0) | 2022.02.20 |
| [React] Component와 State and Props (0) | 2022.02.20 |
| [React] Webpack 바벨(Babel)과 린트(Lint) (0) | 2021.12.31 |