Webpack 과제-01

🏁 Bare Minimum

CLI에서 npm i 로 node_modules 다운받기?

➰ src 폴더 만들어서 index.html, script.js, style.css, data.js 넣기

➰ data.js랑 script.js 수정하기

• data.js : const agoraStatesDiscussions = [...] 앞에 export 추가해주기
  ⇒ script.js 에 불러서 사용할 예정
• script.js : 상단에 import {agoraStatesDiscussions} from "./data" 추가해주고, let data = agoraStatesDiscussions 추가해주기
  ⇒ data.js 에 있는 데이터 리스트들 다 보여주게 하기 위해 추가

➰ 관련 웹팩 전부 설치하기(CLI 에서)

npm i -D webpack webpack-cli css-loader style-loader html-webpack-plugin

➰ package.json 에 build 추가

"script" 객체 안에 "build": "webpack", 추가하기

➰ webpack.config.js 만들기

src 폴더 밖에 만들기!!!!!

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/script.js",
  output: {
    filename: "app.bundle.js", // 진입점
    path: path.resolve(__dirname, "dist"), // 경로
  },
  module: {
    rules: [
      {
        test: /\.css$/i, // .css 파일 전부?
        use: ["style-loader", "css-loader"], // css-loader랑 style-loader 사용하기
        exclude: /node_modules/, // node_modules 라는 텍스트 들어간 파일이나 폴더 전부 제외
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // template 옵션 추개해서 html 파일 읽을 수 있게
      // 현재 내 index.html 파일은 src 폴더 내에 있으니까 아래처럼 씀
      // 만약 index.html 이 webpack이랑 같은 레벨선 상에 있다면
      //()안에 index.html 만 써주면 된다.
      template: path.resolve(__dirname, "src", "index.html")
    })
  ],
}

➰ index.html 수정

index.html 파일 안에 css 연결된 <link> 태그랑
data.js 연결된 <script> 태그랑 script.js 연결된 <script> 태그 지우기

➰ 번들링하기

CLI에 npm run build 입력해서 번들링해주면
dist 폴더에 app.bundle.js 생성되고, index.html 생성된다.
⇒ dist/index.html 에 <script defer="defer" src="app.bundle.js"></script> 추가 되어있으면 됨!

🧐 시행착오-01

src/index.html 에 있는 css 랑 script 들을 지우지 않고 자꾸 번들링함..ㅎ

🧐 시행착오-02

자꾸 src/index.html 을 열었다..
번들링 된 파일을 확인하려면 dist/index.html 을 라이브 서버로 열어서 확인하자

---

🏁 Advanced

👍 output 관리

• ✔️ 번들링 할 때 마다 dist 디렉터리를 정리하기
• ✔️ app.bundle.js 가 아니라, output이 늘 동적으로 변하도록 생성해보기

Bare Minimum 에서 만들었던 webpack.config.js 에서
동적으로 파일이름이 생성될 수 있게 entry 부분을 수정하고
output 안에 filename 을 "[name].bundle.js", 로 바꾸고
clean: true, 추가하기

entry: {
  main: "./src/script.js", 
},
output: {
  filename: "[name].bundle.js",
  path: path.resolve(__dirname, "dist"),
  clean: true,
},

⇒ clean: true 를 줬더니 이전에 있었던 app.bundle.js 가 사라졌다.

👍 브라우저 호환성

• ✔️ ES6를 지원하지 않는 브라우저에서 실행 가능하게 target 속성을 활용하기

webpack.config.js 에 target 추가하기

module.exports = {
  mode: development,
  target: ["web", "es5"] // es5 버전으로 컴파일하게
}

👍 개발용 서버

• ✔️ 라이브 서버와 비슷한 기능을 하는 webpack-dev-server를 적용하기

CLI 에 npm i -D webpack-dev-server 로 설치하고,
package.json "script" 객체 안에 "dev": "webpack serve", 추가하기

webpack.config.js 파일에
module.exports 안에 plugins 밑에 devServer 추가하기

module.exports = {
  ...
  devServer: {
    port: 8000,
  }
};

개발용 서버가 제대로 됐는지 확인하려면
port를 8000으로 설정했으니까 8000 포트로 진입하기
CLI 에 npm run dev (해서 webpack server 열고?) 했을 때
successfully 가 나오면서
[webpack-dev-server] Loopback: http://localhost:8000/ 의 해당 링크를 눌러서 확인이 되면 제대로 된거다!

👍 작동 모드 설정 + Asset 관리

• ✔️ development mode와 production mode의 차이에 대해서 학습하고, config file을 나누기
• ✔️ CSS에 minify를 적용해보기. (힌트: mini-css-extract-plugin, css-minimizer-webpack-plugin)

mode: development 와 mode: production 에 따라 다른 config 파일을 만들고
이걸 합쳐주는 녀석이 필요한데 이는 merge란 package가 수행한다고 한다.

➰ 성격에 맞는 config 파일 생성하기

각기 다른 성격을 가진 파일들
webpack.common.js, webpack.dev.js, webpack.prod.js
원래 webpack.config.js 파일이 있던 root 에 만들고 webpack.config.js 지우기
(CLI 로 만들거나 직접 만들기)

• mode: production 에서 필요한 것 : mini-css-extract-plugin (style-loader 대신), css-minimizer-webpack-plugin, devtool, target
• mode: development 에서 필요한 것 : webpack-dev-server, target
  
  

➰ webpack-merge 설치하기

이 config 파일들을 합쳐줄 수 있는 webpack-merge 를 CLI 에서 설치한다.

➰ 각 config 파일 만들기

webpack.common.js
공통 파일을 만드는 느낌으로, 기존에 webpack.config.js 파일에서
mode, devServer, devtool, style-loader 을 삭제한다.
추가로 우리는 github 배포를 docs 파일로 할 것이기 때문에
output 에 path 를 path: path.resolve(__dirname, "docs"), 로 변경하기

webpack.dev.js
mode, devServer. devtool 추가

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
// 첫번째 인자는 style-loader를 넣어주기 위함????
const customizedDevCommon = {
  ...common,
  module: {
    rules: [
      { 
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
        exclude: /node-modules/,
      }
    ],
  },
};
//
module.exports = merge(customizedDevCommon, {
  mode: "development",
  devServer: {
    port: 8000,
  }
  devtool: "eval-source-map", // 개발자 모드에서 추천하는 sourceMap 
})

webpack.prod.js
MiniCssExtractPlugin 은 loader 랑 plugin 에 등록하고
CssMinimizerPlugin 은 최적화에 등록

const { merge } = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-plugin");
const common = require("./webpack.common.js");
// 첫번째 인자는 MiniCssExtractPlugin 넣어주기 위함
const customizedDevCommon = {
  ...common,
  module: {
    rules: [
      { 
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"], // MiniCssExtractPlugin loader 등록
        exclude: /node-modules/,
      }
    ],
  },
};
//
module.exports = merge(customizedDevCommon, {
  mode: "production",
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
  plugins: [new MiniCssExtractPlugin()],
})

➰ 각각 다른 config 파일 관련 package.json에 설정 추가하기

webpack 이 mode에 맞게 실행될 수 있게
package.json 에 script를 알맞게 바꿔주자

"script" 객체 안에 "dev": "webpack serve --open --config webpack.dev.js", 로 바꿔주고
"build": "webpack --config webpack.prod.js", 추가하기

👍 github 에 배포하기

remote url 확인하기 : git config --get remote.origin.url

➰ 먼저 내 github 에 새로운 레포지토리를 만들어야 한다.

➰ 이전의 git 날리고 다시 설정하기

agora-state-reference 를 clone 해왔기 때문에
CLI 에서 rm -rf .git .github 로 원래 git을 지워주고
git init 으로 다시 설정한다.

➰ 만들었던 레포지토리에 추가하기

git remote add origin 여기에생성한레포지토리의SSH넣기 하고 엔터

➰ github page에 쉽게 배포하는 gh-pages package 사용하기

CLI 에서 npm i -D gh-pages 하고,

package.json 에 명령어를 추가한다.
우선 "script" 객체 안에 "deploy": "gh-pages -d dist", 추가하고,
"homepage" 뒤에 있는 값을 아래 처럼 내 github이름과 레포지토리 이름으로 변경한다.
"https://깃헙아이디.github.io/생성했던레포지토리이름",
예시: "https://moonozz.github.io/webpack-ad-practice",

전부 다 하고 npm run build 를 한 후에

CLI 에 npm run deploy 하면
원래 branch 에서 gh-pages 를 따로 만들어 줄 필요 없이
gh-pages package 를 사용해서 자동으로 github page 에 배포한다.

🧐 시행착오-03

webpack.common.js 에 plugins 의 template 을 잘못 적었다.
나는 index.html이 src에 있으니까
template: path.resolve(__dirname, "./src/index.html"), 이렇게 적어야 함!

만약 같은 root 에 있다면 template: "./index.html", 이렇게 적으면 된다.

🧐 시행착오-04

배포에서 404에러가 떠서 물어봤는데..
package.json 에 homepage 에서 url 링크를 제대로 입력하지 않았다..ㅎ
작은 실수 조심하자!!!

---

출처 : 박기정 짱👍