[📚 라이브러리] Webpack과 씨름한 나..

과제중에서 웹팩으로 번들링하는 과제가 있었다.

계속 파일의 경로를 잘못써서 그런지
어떻게 작성해야할지 애를 먹다가 드디어 성공했다. ㅠㅠ

---

1. 현재 나의 파일들을 전부 src 폴더를 생성해서 넣어주었다.

---

2. npm init -y 으로 package.json 파일을 생성

package.jsom 파일을 설정해주었다. (위 파일 있다면 생략)

{
  "name": "fe-sprint-my-agora-states",
  "version": "1.0.0",
  "description": "",
  "main": "./src/script.js", // 애먹은 부분.
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 웹팩 사용하기 위해서 작성하기. 
  },

main에는 시작지점을 입력하면 되는 듯했다.
html 파일을 작성해야 하는건가? 생각했는데 메인위치의 js 파일로 작성하면 된다.

3. 웹팩 , 설치 및 webpack.config.js 파일 작성

설치 목록

npm install -D webpack webpack-cli // 웹팩 설치
npm i -D css-loader style-loader // 스타일 로더 설치 
npm i -D html-webpack-plugin // html 웹팩 플러그인 설치 

webpack.config.js

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

module.exports = {
  entry: "./src/script.js", // 시작지점 파일 경로 설정 
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  })]
};

---

4. 파일 경로

• src/ css 파일 -> 당연히 건드릴거 x
• src/script.js -> 맨위에 require('./style.css'); 추가
• src/index.html -> script,css 파일 같은 폴더 안이니 경로 작성 잘 되는지 확인 ( 이 부분은 근데 그냥 html 잘 되는지 확인하면 되는거)

나는 우선 script 파일에 require 작성해주지 않아서 dist/index.html 파일이 경로를 제대로 불러오지 못해서 헤맸다 😇

---

5. 번들링

npx webpack 

실행하면 dist 폴더 생성 > app.bundle.js / index.html 파일이 생성되었다.
처음에는 당황스러워서 dist 폴더 내의 index.html 파일도 수정해야하나? 생각했는데 생각해보니 저거는 번들링 후에 생성되는 앤데 당연히 수정할게 있나.. 싶었다.

---

6. 결과

src/index.html
dist.index.html 파일이 둘다 동일하게 작동되면 성공이다.

---

헷갈린 부분

package.json 파일에서

"main": "./src/script.js", 이 부분은 루트 경로로 세부 경로까지 잘 작성해주고.

src/script.js 파일에서

css 불러오려면 꼭 require 잘 쓰자..