public 폴더에 이미지 파일을 넣고.
src -> pages -> Email -> index.tsx Component 에서 <img src="/logo@3x.png"> 이런 식으로 불러 올려 하는 데 계속 불러 오지지가 않습니다.
웹팩 설정 부분 입니다.
import path from 'path';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack from 'webpack';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
const isDevelopment = process.env.NODE_ENV !== 'production';
const config: webpack.Configuration = {
name: 'hayd-web',
mode: isDevelopment ? 'development' : 'production',
devtool: !isDevelopment ? 'hidden-source-map' : 'eval',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], // 바벨이 처리 활 확장자 목록.
alias: { // ..../... 이런 것들 없애는 것.
'@assets': path.resolve(__dirname, 'assets'),
'@services': path.resolve(__dirname, 'services'),
'@contexts': path.resolve(__dirname, 'contexts'),
'@hooks': path.resolve(__dirname, 'hooks'),
'@components': path.resolve(__dirname, 'components'),
'@layouts': path.resolve(__dirname, 'layouts'),
'@pages': path.resolve(__dirname, 'pages'),
'@typings': path.resolve(__dirname, 'typings'),
},
},
entry: { // 메인 파일.
app: './client',
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'babel-loader', // tsx -> 바벨 로더가 javascript 바꿔줌.
options: {
presets: [ // 바벨에 대한 설정.
[
'@babel/preset-env',
{
targets: { browsers: ['IE 10'] }, // IE 10 지원 해 줍니다, 호환.
debug: isDevelopment,
},
], // react typescript 모든 소스 코드를 IE 까지 돌아가게.
'@babel/preset-react',
'@babel/preset-typescript',
],
env: {
development: {
plugins: [['@emotion', { sourceMap: true }], require.resolve('react-refresh/babel')],
},
production: {
plugins: ['@emotion']
}
},
},
exclude: path.join(__dirname, 'node_modules'),
},
{
test: /\.css?$/, // css 파일을
use: ['style-loader', 'css-loader'], // javascript 결과물로 만들어 줍니다.
},
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'file-loader'
}
],
},
plugins: [
// ts 랑 webpack 이랑 동시에 돌아가게 해주는 것.
new ForkTsCheckerWebpackPlugin({
async: false,
// eslint: {
// files: "./src/**/*",
// },
}),
// 여기서 EnvironmentPlugin 에 넣으면NOD_ENV 를 node 접근 가능.
new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js', // name 은 client 애가 됩니다.
publicPath: '/dist/',
},
devServer: {
historyApiFallback: true, // react router
port: 3020,
devMiddleware: { publicPath: '/dist/' },
static: { directory: path.resolve(__dirname) },
// // ORS 문제를 해결 해 줍니다.
// proxy: {
// '/api/': {
// target: 'http://localhost:3000',
// changeOrigin: true,
// ws: true,
// },
// },
},
};
if (isDevelopment && config.plugins) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new ReactRefreshWebpackPlugin());
// config.plugins.push(
// new ReactRefreshWebpackPlugin({
// overlay: {
// useURLPolyfill: true,
// },
// }),
// );
// config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: false }));
}
if (!isDevelopment && config.plugins) {
// config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
// config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
}
export default config;
