⛔️ 오류

Webpack 에서 CopyPlugin 설정 오류

HYEBEEN 2023. 3. 16. 16:40

이유:

복사할 파일 이름 잘못 설정했다... 배포할때 사용해야 하므로 prod폴더에 설정해주어야 합니다. webpack public 안에
있는 폴더는 build할때 build 폴더에 복사 안되므로 build폴더에 복사해 주고 싶을때 사용해야합니다.

해결:

//prod.js

const { resolve } = require("node:path");
const CopyPlugin = require("copy-webpack-plugin");

const prodConfig = {
  mode: "production",
  output: {
    path: resolve("build"),
    filename: "[name].[contenthash].min.js",
  },
  plugins: [
    //webpack public 안에 있는 폴더는 build할때 build 폴더에 복사 안됨
    new CopyPlugin({
      //public/assets => assets폴더로 복사
      patterns: [{ from: "public/assets", to: "assets" }],
    })
  ].filter(Boolean),
};

module.exports = prodConfig;npm run

public

build 후)

//index.html

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>
      [모듈 번들러의 필요성] 모듈 번들러 없이 모듈로 구성된 파일의 의존성 관리
    </title>
    <link rel="icon" href="/assets/favicon.svg" />
    <script defer="defer" src="main.8e21b7f0dfca1a90efbd.min.js"></script>
    <link href="main.0c67aac5be5878787c3c.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>