index.js

Download
javascript 61 lines 1.7 KB 
 1/**
 2 * Webpack ν”„λ‘œμ νŠΈ 메인 μ§„μž…μ 
 3 *
 4 * Webpack νŠΉμ§•:
 5 * - λͺ¨λ“ˆ λ²ˆλ“€λ§
 6 * - μ½”λ“œ λΆ„ν•  (Code Splitting)
 7 * - 트리 쉐이킹 (Tree Shaking)
 8 * - λ‘œλ”μ™€ ν”ŒλŸ¬κ·ΈμΈ μ‹œμŠ€ν…œ
 9 */
10
11// CSS μž„ν¬νŠΈ
12import './styles/main.css';
13
14// μ»΄ν¬λ„ŒνŠΈ μž„ν¬νŠΈ
15import { greeting } from './components/greeting';
16import { formatDate } from './utils/helpers';
17
18// μ•± μ΄ˆκΈ°ν™”
19function initApp() {
20    console.log('πŸ“¦ Webpack 앱이 μ‹œμž‘λ˜μ—ˆμŠ΅λ‹ˆλ‹€!');
21
22    const content = document.getElementById('content');
23    if (content) {
24        content.innerHTML = greeting('Webpack μ‚¬μš©μž');
25    }
26
27    console.log(`πŸ“… ν˜„μž¬ μ‹œκ°„: ${formatDate(new Date())}`);
28
29    // 동적 μž„ν¬νŠΈ (Code Splitting) 예제
30    const loadMoreBtn = document.getElementById('loadMore');
31    if (loadMoreBtn) {
32        loadMoreBtn.addEventListener('click', async () => {
33            // 동적 μž„ν¬νŠΈ - 별도 청크둜 뢄리됨
34            const { loadExtraContent } = await import(
35                /* webpackChunkName: "extra" */
36                './components/extra'
37            );
38            loadExtraContent(content);
39        });
40    }
41}
42
43// DOM λ‘œλ“œ ν›„ μ΄ˆκΈ°ν™”
44if (document.readyState === 'loading') {
45    document.addEventListener('DOMContentLoaded', initApp);
46} else {
47    initApp();
48}
49
50// HMR (Hot Module Replacement)
51if (module.hot) {
52    module.hot.accept('./components/greeting', () => {
53        console.log('πŸ”„ greeting λͺ¨λ“ˆμ΄ μ—…λ°μ΄νŠΈλ˜μ—ˆμŠ΅λ‹ˆλ‹€!');
54        const content = document.getElementById('content');
55        if (content) {
56            const { greeting } = require('./components/greeting');
57            content.innerHTML = greeting('Webpack μ‚¬μš©μž');
58        }
59    });
60}