작성
·
833
0
안녕하세요. 수강중에 따라하다가 막혀서 질문드립니다.
clone coding중에 제 프로젝트에서 Hot reload가 안되길래
제로초님이 올려주신 깃헙프로젝트를 그대로 받아서 front에서 npm run dev를 해줬는데, 역시 화면은 잘 뜨는데 hot reload가 안됩니다.
더 자세히는 파일에 변경사항이 생긴 후 save를 해도 compile은 다시 되나 view가 업데이트 되지 않습니다.
아래는 clone 코딩 중인 제 webpack.config.ts 파일입니다.
제로초님의 Front 프로젝트 안의 config파일과 다른 점은 styled-component 설정에 대한 추가와, devServer에서 proxy설정을 삭제한 것 뿐인데...어디가 잘못된걸까요?ㅠㅠ
import path from 'path';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack, { Configuration as WebpackConfiguration } from 'webpack';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration;
}
const isDevelopment = process.env.NODE_ENV !== 'production';
const config: Configuration = {
name: 'newts',
mode: isDevelopment ? 'development' : 'production',
devtool: !isDevelopment ? 'hidden-source-map' : 'inline-source-map',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {
'@src': path.resolve(__dirname, 'src'),
'@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',
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/dist/',
},
target: ['web', 'es5'],
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
targets: { browsers: ['IE 10'] },
debug: isDevelopment,
},
],
'@babel/preset-react',
'@babel/preset-typescript',
],
plugins: [require.resolve('react-refresh/babel'), 'babel-plugin-styled-components'],
},
},
{
test: /\.css?$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
new ForkTsCheckerWebpackPlugin({
async: false,
eslint: {
files: './src/**/*',
},
}),
],
devServer: {
historyApiFallback: true,
port: 3020,
publicPath: '/dist/',
hot: true,
},
};
if (isDevelopment && config.plugins) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(
new ReactRefreshWebpackPlugin({
overlay: {
useURLPolyfill: true,
},
}),
);
}
if (!isDevelopment && config.plugins) {
config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
}
export default config;
ts/settings 폴더 입니다.