이유:
복사할 파일 이름 잘못 설정했다... 배포할때 사용해야 하므로 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 runpublic
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>'⛔️ 오류' 카테고리의 다른 글
| node.js의 version이 맞지않아 발생한 오류 (0) | 2023.03.16 |
|---|---|
| TypeScript Generic 오류 (0) | 2023.03.16 |
| Unknown at rule @tailwind 경고 (0) | 2023.03.16 |
| webpack 에서 eslint 설치 시 생긴 오류 (0) | 2023.03.16 |
| tailwind.css ⇒ ‘@’불러와 지지 않는 오류 (0) | 2023.03.16 |
