[React] Webpack 실습

Programming/React

[React] Webpack 실습

RosyPark 2022. 6. 30. 08:58

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/