웹팩 빌드 후 배포 에러

Question

안녕하세요!웹팩 바벨로 구현한 리액트 프로젝트 빌드 후 깃헙 페이지에서 배포를 진행했는데 흰화면만 보이는 문제가 발생해서 질문 드립니다. 아래는 해당 프로젝트를 배포한 깃헙페이지에서 연 개발자 도구 캡쳐본인데 아무래도 번들링 된 js파일이 포함이 안된 것 같습니다.경로문제인것 같아 수정을 해보았지만 잘되지 않네요스크립트 경로를 ./깃헙레포지토리명/docs/app_bundle.js 로 수정해도 결과는 똑같았습니다 아래는 제 파일구조와 전체코드입니다! webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const path = require('path'); module.exports = { mode: 'production', entry: { app: './src/index.js' }, output: { path: path.resolve(__dirname, './docs'), // 생성될 번들 파일 경로 지정 filename: '[name]_bundle.js', // 번들 파일 이름 지정 // 새로 추가한 부분 (배포 후 js파일 포함 안되는 에러) publicPath: '/' // 실제 호스팅 경로에 맞게 지정 }, resolve: { extensions: ['.js', '.jsx', '.json', '.css'], alias: { '@assets': path.resolve(__dirname, './src/assets'), '@layouts': path.resolve(__dirname, './src/layouts'), '@pages': path.resolve(__dirname, './src/pages'), '@components': path.resolve(__dirname, './src/components'), '@data': path.resolve(__dirname, './src/data'), '@redux': path.resolve(__dirname, './src/redux'), }, }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] },//해당 파일에서 .css 파일로 확인되는 경로를 발견하면 번들에 추가하기전에 ``raw-lodaer``를 사용해 변환. { test: /\.(jpg||png)$/, use: ['file-loader'] },//jpg 이미지 파일 처리 ], }, plugins: [ // new CleanWebpackPlugin(),// 웹팩 실행시마다 docs 폴더 정리 new HtmlWebpackPlugin({ // 사용할 HTML 템플릿 파일 template: './src/index.html', chunks: ['app'] }), // 불필요한 파일 정리 new CleanWebpackPlugin(), ], devServer: { port: 5500, //핫 모듈 리로딩 hot: true, open: true, // 서버 실행 후 자동으로 브라우저 열기 historyApiFallback: true, webSocketServer: false, } }src/index.html (번들링에 사용되는 html) Watflix

docs/index.html (번들링된 html) Watflix

package.json{ "name": "watflix", "homepage": "https://아이디.github.io/Watflix/", "version": "1.0.0", "description": "", "main": "./docs/app_bundle.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack serve --open --mode=development", "deploy": "gh-pages -d docs", "build": "webpack --mode=production --config webpack.config.js" }, "author": "", "license": "ISC", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@reduxjs/toolkit": "^1.9.5", "babel-plugin-macros": "^3.1.0", "clean-webpack-plugin": "^4.0.0", "express": "^4.18.2", "gh-pages": "^5.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.1.1", "react-router-dom": "^6.11.1", "redux-persist": "^6.0.0" }, "devDependencies": { "@babel/core": "^7.22.10", "@babel/preset-env": "^7.22.10", "@babel/preset-react": "^7.22.5", "babel-loader": "^9.1.3", "css-loader": "^6.8.1", "eslint": "^8.39.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-prettier": "^4.2.1", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.3", "mini-css-extract-plugin": "^2.7.6", "prettier": "^2.8.8", "style-loader": "^3.3.3", "webpack": "^5.82.0", "webpack-cli": "^5.0.2", "webpack-dev-server": "^4.15.1" } }제가 main 경로를"main": "./docs/app_bundle.js" 로 번들링결과물 파일로 설정했습니다여러 경로를 수정해봤지만 해결이 되지 않아 질문드립니다 답변주시면 감사하겠습니다 ㅜㅜ

haeil · Accepted Answer

예전에 저도 깃허브에서 특정 라이브러리를 클론해서 해당 템플릿으로 작업한 적이 있는데 비슷한 문제가 있었어요만약 같은 문제라면 해당 레포에 이슈를 등록해서 소통해보시거나다른 라이브러리를 사용하시는게 좋을거 같아요

웹팩 빌드 후 배포 에러

1개의 답변

기술 목록