webpack 설정하는 방법

기본 설정

npm init -y

npm i -D webpack webpack-cli

package.json의 "scripts"내에 "build": "webpack --mode production" 추가

webpack.config.js 생성 후 아래 코드 추가

const path = require("path");

module.exports = {
  mode: "development",
  //시작점
  entry: path.resolve(__dirname, "src/index.js"),
  //웹팩 작업을 통해 생성된 결과물
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
};

---

scss를 사용하고 싶다면?

npm i -D style-loader css-loader sass-loader
(설치가 제대로 안된다면 하나씩 따로 설치)

 

cf. 만약 cannot find module 'sass'오류가 뜬다면?
npm cache clear --force
npm install sass
다시 빌드 시도하기 npm run build)
그리고 webpack.config.js에 아래 코드 추가

module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },

 use 내용 순서 중요!! 실행 순서가 중요하기 때문. (역순으로 실행된다)

 

---

만약 웹팩 플러그인을 사용하고 싶다면? - src내 index.html을 dist로 넣어주기 

 

npm i -D html-webpack-plugin

그리고 webpack.config.js에 아래 코드 추가

plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "src/index.html",
    }),
  ],

 

---

dist에 빌드된 js파일 이름을 해쉬값으로 바꾸고 싶다면 + 계속 새로운 js파일이 생기는 게 아니라 덮어쓰게 만들고 싶다면?

 webpack.config.js에서 output 수정

//웹팩 작업을 통해 생성된 결과물
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name][contenthash].js",
    clean: true,
  },

 

---

웹팩에서 웹서버 역할을 하도록 하려면? (Webpack Dev Server)

webpack.config.js에 아래 코드 추가

devServer: {
    static: {
      directory: path.join(__dirname,'dist')
    },
    port:3000,
    open: true, //바로 열기,
    compress: true //gzip으로 압축
  }
그리고 package.json에
"scripts": {
    "dev": "webpack serve",
}

 

gzip이란: 사이즈가 줄어들어 빨리 받아올 수 있게 함. 브라우저에서 압축 푸는 능력있음