풀스택 맛보기10-Webpack

1. Webpack
   1. rules
      1. loader
         1. mode 설정
      2. loader
      3. Mini Css Extract Plugin
         1. output 변경하기
      4. 자동 refresh & compile
         1. nodemon.json

Webpack

• 모든 파일을 받아서 하나의 파일로 압축해주는 모듈 번들러(Module bundler)이다.

💡번들러(bundler): 여러 개의 파일을 하나로 묶어주는 역할을 한다. ex) Webpack, parcel…

https://webpack.js.org/concepts/

npm i webpack webpack-cli -D

webpack.config.js 생성

module.exports = {
  entry: "./src/client/js/main.js",
  output: {
    filename: "main.js",
    path: "./assets/js",
  },
};

rules

loader

npm i babel-loader -D

const path = require("path");

module.exports = {
  entry: "./src/client/js/main.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "assets", "js"),
  },
  module: {
    usles: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { targets: "defaults" }]],
          },
        },
      },
    ],
  },
};

mode 설정

development: 개발 모드 production :

mode를 development로 설정

...
module.exports = {
  entry: "./src/client/js/main.js",
  mode: "development",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "assets", "js"),
  },
...

=> 이전처럼 코드를 압축하지 않는다.

loader

npm install sass-loader -D => scss를 가져다가 일반 css로 전환 시켜준다.

npm install -D css-loader => import와 URL을 풀어서 해석해준다.

npm install -D style-loader => css를 DOM에 주입한다.

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { targets: "defaults" }]],
          },
        },
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

⭐⭐⭐ 사용 순서: sass-loader -> css-loader -> style-loader

Mini Css Extract Plugin

• 해당 코드를 다른 파일로 분리시킨다.

🔧 npm i -D mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");

module.exports = {
  entry: "./src/client/js/main.js",
  plugins: [new MiniCssExtractPlugin()],
  mode: "development",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "assets", "js"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { targets: "defaults" }]],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
};

assets/js에 main.js와 main.css가 생성된 것을 확인할 수 있다. => css를 다른 곳에 위치시킨다.

output 변경하기

...
module.exports = {
  entry: "./src/client/js/main.js",
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/styles.css",
    }),
  ],
  mode: "development",
  output: {
    filename: "js/main.js",
    path: path.resolve(__dirname, "assets"),
  },
...

=> 파일 생성 결과 assets ↳ css ↳ styles.css ↳ js ↳ main.js

자동 refresh & compile

watch

• client 파일들을 watch 하여 변경이 있을 때 refresh와 compile을 다시 해준다.

module.exports = {
  entry: "./src/client/js/main.js",
  mode: "development",
  watch: true,
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/styles.css",
    }),
  ],
   output: {
    filename: "js/main.js",
    path: path.resolve(__dirname, "assets"),
    clean: true,
  },
...

💡 clean: true //기존 파일을 삭제 해준다.

nodemon.json

• nodemon의 재시작을 막아준다.

nodemon.json

{
  "ignore": ["webpack.config.js", "src/client/*", "assets/*"],
  "exec": "babel-node src/init.js"
}

packge.json

...
"scripts": {
    "dev": "nodemon -L",
    "assets": "webpack --config webpack.config.cjs"
  },
...