[TIL] Day63 #React-Webpack

2022.07.25(Tues)

[TIL] Day63
[SEB FE] Day64

☑️ React에 Webpack 사용해보기

1. Install

   # webpack 설치
   $ npm install -D webpack webpack-cli
   
   # babel 설치
   $ npm install --save-dev @babel/core babel-loader @babel/preset-react @babel/preset-env
   
   # web-dev-server, 개발용 서버 설치
   $ npm install --save-dev webpack-dev-server
   
   # html-webpack-plugin
   $ npm install --save-dev html-webpack-plugin
   
   # css-loader, style-loader 설치
   $ npm i -D css-loader style-loader

2. webpack.config.js

   const path = require("path");
   const HtmlWebpackPlugin = require("html-webpack-plugin");
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
   
   module.exports = {
     mode: "development", // 작동 모드를 개발자모드로 설정
     entry: "./src/index.js",
     devServer: {
       static: "./dist",
     },
     output: {
       path: path.join(__dirname, "/dist"),
       filename: "[name].js",
       clean: true,  // 번들링할 때 마다 dist 디렉터리 정리
     },
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: "babel-loader",
           },
         },
         {
           test: /.s?css$/,
           use: [MiniCssExtractPlugin.loader, "css-loader"],
           exclude: /node_modules/,
         },
       ],
     },
   	// Asset 관리
     optimization: {
       minimizer: [new CssMinimizerPlugin()],
       runtimeChunk: "single",
     },
   
     // html-webpack-plugin
     plugins: [
       new HtmlWebpackPlugin({
         template: path.resolve(__dirname, "./public/index.html"),
       }),
       new MiniCssExtractPlugin(),
     ],
   };

3. .babelrc 파일 추가

   {
     "presets": [
         "@babel/env",
         "@babel/react"
     ]
   }

4. package.json ”scripts” 변경

   "scripts": {
       "start": "webpack-dev-server --mode development --open --hot",
       "build": "webpack --mode production",
   },

5. import React from "react";

   ✨ React undefined ... 에러가 발생하므로 App.js, components 내의 js 파일에 아래 코드 추가해줘야 함!

   import React from "react";

📎 github page에 webpack 배포하기

오늘은 어제 github repository에 직접 docs 폴더만 올리는 방식이 아니라 페어님이 알려주신 방식대로 깃헙 페이지 배포를 해보았다!

$ npm install gh-pages --save-dev

// package.json

// scripts 부분에 predeploy, deploy 코드 추가
"scripts": {
    "predeploy": "npm run build",
		"deploy": "gh-pages -d dist"
},

// homepage에 github repository 주소 추가
"homepage": "https://beanxx.github.io/fe-sprint-react-webpack/",

• 위의 설정해주고, github 해당 repository의 settings - pages 페이지에 들어가서 github page 생성해주고, 아래 코드를 실행하면 설정 끝!

  # 아래 코드로 deloy script를 실행
  $ npm run deploy

• 마지막으로 다시 setting - pages 에서 branch를 gh-pages로 바꾸고, /root 폴더를 설정해주면 배포 끝 ✨