[Webpack] 내 프로젝트에 적용시킨 webpack.config.js 공부

시작!

 

목차

📌 webpack.config.js

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
 
module.exports = {
  mode: "production",
  entry: {
    main: "./js/index/app.js",
    additional: [
      "./js/index/choiceTip.js",
      "./js/index/clothesSlider.js",
      "./js/index/getYoutube.js",
      "./js/index/scroll.js",
    ],
    myClothes: [
        "./js/myClothes/app.js",
        "./js/myClothes/colorSet.js",
        "./js/myClothes/scroll.js",
        "./js/myClothes/uploadImage.js",
      ],
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|pages)/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.scss$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "./images",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html", 
      excludeChunks: ["myClothes"], // myClothes.js를 index.html에 적용하지 않음
    }),
    new HtmlWebpackPlugin({
      filename: "views/myClothes.html",
      template: "./views/myClothes.html",
      chunks: ["myClothes"], // myClothes.js와 연결
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: "css", to: "css" },
        { from: "scss", to: "scss" },
        { from: "images", to: "images"},
        { from: "images", to: "images"},
        { from: "font", to: "font"},
      ],
    }),
  ],
};
 

 

 

⭐️ 1. 모드 설정 

 

mode 매개 변수는 다음 3가지 값 중 하나를 사용할 수 있다. 

 

 mode: "production",

 

mode 값	설명
development	개발 모드
production	배포 모드 (기본 값)
none	기본 최적화 옵션 설정 해제

 

"production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄일 수 있다.

 

 

https://yamoo9.gitbook.io/webpack/webpack/config-webpack-dev-environment/webpack-mode

 

 

 

⭐️ 2. 엔트리 설정 

 

entry : 애플리케이션의 진입점 (entry point)를 설정한다. 나는 "main", "additional", "myClothes" 세 가지 엔트리 포인트를 정의하였다. 이는 각각에 해당하는 JavaScript 파일이 엔트리로 사용된다.

entry: {
    main: "./js/index/app.js",
    additional: [
      "./js/index/choiceTip.js",
      "./js/index/clothesSlider.js",
      "./js/index/getYoutube.js",
      "./js/index/scroll.js",
    ],
    myClothes: [
        "./js/myClothes/app.js",
        "./js/myClothes/colorSet.js",
        "./js/myClothes/scroll.js",
        "./js/myClothes/uploadImage.js",
      ],
  },

 

⭐️ 3. 출력 설정 

 

output : 웹팩이 생성하는 번들 파일의 이름과 경로를 설정한다. 번들 파일의 이름은 [name].bundle.js 형식으로 설정하였고 path는 dist 폴더로 설정하였다. clean을 true로 설정함으로써 빌드 시 이전의 번들 파일을 자동으로 제거한다.

 

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

 

⭐️ 4. 모듈 설정 

 

module : 소스 코드에서 사용되는 모듈들의 처리 방법을 설정한다. 

rules : 각각의 규칙을 정의하여 특정 유형의 파일들을 처리한다. 

 

여기서는 JavaScript 파일을 'babel-loader'를 사용하여 변환하고, CSS 파일은 style-loader와 css-loader를 사용하여 로드하며, SCSS 파일은 'sass-loader'를 사용하여 처리한다. 

 

마지막으로 이미지 파일은 'file-loader'를 사용하여 로드하고, 지정된 경로에 복사한다.

 

📌 loader 설치 명령어

 

npm install -D css-loader 

npm install -D sass-loader

npm install -D file-loader

 

 module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|pages)/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.scss$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "./images",
        },
      },
    ],
  },

 

⭐️ 5. 플러그인 설정 

 

plugins: 웹팩의 플러그인들을 설정한다. 플러그인은 번들링 과정에서 추가적인 작업을 수행하거나 기능을 확장하는 데 사용한다.

나는 HtmlWebpackPlugin을 사용하여 HTML 파일을 생성하고, CopyWebpackPlugin을 사용하여 정적 파일(이미지, CSS, SCSS, 폰트 등)을 복사하였다.

 

var HtmlWebpackPlugin = require("html-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");

 plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html", 
      excludeChunks: ["myClothes"], // myClothes.js를 index.html에 적용하지 않음
    }),
    new HtmlWebpackPlugin({
      filename: "views/myClothes.html",
      template: "./views/myClothes.html",
      chunks: ["myClothes"], // myClothes.js와 연결
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: "css", to: "css" },
        { from: "scss", to: "scss" },
        { from: "images", to: "images"},
        { from: "images", to: "images"},
        { from: "font", to: "font"},
      ],
    }),
  ],

 

💡  HtmlWebpackPlugin

 

filename : 내가 설정할 html 파일의 이름 

template: 설치될 html 파일의 경로 

chunks: 내가 적용시킬 엔트리 설정 

excludeChunks: 제외시킬 엔트리 설정  

 

 

💡  CopyWebpackPlugin 

 

from : 기존 프로젝트 내 파일 or 폴더

to : 내가 지정한 경로 ( 나는 dist ) 내에 만들어질 파일 or 폴더 이름