webpack-dev-server 핫리로딩 관련 질문입니다.

안녕하세요

저도 CRA로 무작정 만드는 것 보다는 한번쯤은 실제로 만들어보면서 에러도 만나보고 구글링해서 해결해보는 경험을 쌓는 것이 정말 중요하다고 생각합니다. 그래서 실제로 따라해보면서 build까지는 완료했는데 마지막에 문제가 생겨서 질문을 드립니다.

일단 bulid는 정상적으로 동작합니다.

핫리로딩을 적용하려고 해보니까 실행은 정상적으로 되는데 404오류가 떠서 질문드립니다.

( devMiddleware: { publicPath: '/dist/' }는 실행은 되는데 404오류 )

(publicPath: "/dist/"는 실행 자체에서 문제 )

http://localhost:3090, http://localhost:3090/dist 등 해볼만한건 다 해봐도 아무 파일을 받아오지 못하는데 뭐때문일까요...?

index.html의 <script>도 /dist/app.js 랑 ./dist/app.js모두 실행해봤고, 다른 설정파일들은 모두 setting에 있던 파일들을 그대로 복사해서 붙여넣었기때문에 오타는 없습니다.

package.json

{
"name": "sleact-front",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack",
"dev": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --env development"
},
"author": "1-blue",
"license": "ISC",
"dependencies": {
"@types/react": "^17.0.27",
"@types/react-dom": "^17.0.9",
"cross-env": "^7.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typescript": "^4.4.3"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
"@types/node": "^16.10.3",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"fork-ts-checker-webpack-plugin": "^6.3.4",
"prettier": "^2.4.1",
"react-refresh": "^0.10.0",
"style-loader": "^3.3.0",
"ts-node": "^10.2.1",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}

아래는 webpack.config.ts 파일내용입니다.

import path from 'path';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack, { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";

interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration;
}

const isDevelopment = process.env.NODE_ENV !== 'production';

const config: Configuration = {
 name: 'sleact',
 mode: isDevelopment ? 'development' : 'production',
 devtool: isDevelopment ? 'hidden-source-map' : 'inline-source-map',
 resolve: {
 extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
 alias: {
 '@hooks': path.resolve(__dirname, 'hooks'),
 '@components': path.resolve(__dirname, 'components'),
 '@layouts': path.resolve(__dirname, 'layouts'),
 '@pages': path.resolve(__dirname, 'pages'),
 '@utils': path.resolve(__dirname, 'utils'),
 '@typings': path.resolve(__dirname, 'typings'),
 },
 },
 entry: {
 app: './client',
 },
 module: {
 rules: [
 {
 test: /\.tsx?$/,
 loader: 'babel-loader',
 options: {
 presets: [
 [
 '@babel/preset-env',
 {
 targets: { browsers: ['last 2 chrome versions'] },
 debug: isDevelopment,
 },
 ],
 '@babel/preset-react',
 '@babel/preset-typescript',
 ],
 env: {
 development: {
 plugins: [require.resolve('react-refresh/babel')],
 },
 },
 },
 exclude: path.join(__dirname, 'node_modules'),
 },
 {
 test: /\.css?$/,
 use: ['style-loader', 'css-loader'],
 },
 ],
 },
 plugins: [
 new ForkTsCheckerWebpackPlugin({
 async: false,
// eslint: {
// files: "./src/**/*",
// },
 }),
 new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
 ],
 output: {
 path: path.join(__dirname, 'dist'),
 filename: '[name].js',
 publicPath: '/dist/',
 },
 devServer: {
 historyApiFallback: true,
 port: 3090,
 // devMiddleware: { publicPath: '/dist/' }, // 이거는 실행은 되는데 404오류입니다...
 publicPath: '/dist/', // 여기서 오류 ( 아래는 오류 문구입니다. )
 /**
 * '{ historyApiFallback: true; port: number; publicPath: string; }' 형식은 'Configuration' 형식에 할당할 수 없습니다.
 * 개체 리터럴은 알려진 속성만 지정할 수 있으며 'Configuration' 형식에 'publicPath'이(가) 없습니다.ts(2322)
 */
 },
};

if (isDevelopment && config.plugins) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new ReactRefreshWebpackPlugin({
overlay: {
useURLPolyfill: true
}
}));
}
if (!isDevelopment && config.plugins) {
}

export default config;

인프런 커뮤니티 질문&답변