Webpack 5.8 실수 했던 점 3가지

1. 명시적 경로를 적어줌으로서 번들속도를 높힐 것 불필요한 module은 처음부터 제외해주는 것이 좋음.

PC든 CC든 유관성 또는 서로 섞일 수 밖에 없다면 디렉토리 관리 철저

import LoginPage from './pages/LoginPage'

import SignUpPage from './pages/SignUpPage'

import PasswordResetPage from './pages/PasswordResetPage'

2. 단순명료한 path 결정

      // ✅ rootNodeModules/react를 webpack alias에 추가 한다.

      'react': path.resolve(__dirname, 'node_modules/react'),

      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),

      'react-hot-loader': path.resolve(__dirname, 'node_modules/react-hot-loader'),

     

      // ✅ 웹사이트 개발된 컴포넌트 및 유닛들 연동 (@ 2023.04 @hooks 추가 🎉)

      '@config': path.resolve(__dirname, 'src/config.js'),

      '@components': `${path.resolve(__dirname, 'src','components')}`,

      '@containers': `${path.resolve(__dirname, 'src', 'containers')}`,

      '@hooks': `${path.resolve(__dirname, 'src', 'hooks')}`,

      '@services': `${path.resolve(__dirname, 'src', 'services')}`,

      '@store': `${path.resolve(__dirname, 'src', 'store')}`

jsconfig.js 번들과 무관 vscode 의 원본소스 찾기, 1이 전제가 되면 잘연동됨. *(아스테리크) 중요.

{

  "compilerOptions": {

    "baseUrl": ".",

    "paths": {

      "@config": ["./src/config.js"],

      "@components/*": ["./src/components/*"],

      "@containers/*": ["./src/containers/*"],

      "@hooks/*": ["./src/hooks/*"],

      "@services/*": ["./src/services/*"],

      "@store/*": ["./src/store/*"]

    }

  },

  "exclude": ["dist", "public"]

}

3. 환경변수명은 모두 대문자로 process.env.대문자