[webpack] ch2. Webpack Entry

18 Jun 2021

javascript

Webpack Entry

webpack으로 묶은 모든 라이브러리들을 로딩할 시작점 설정
a,b,c 라이브러리르 모두 번들링한 bundle.js를 로딩
1개 또는 2개이상의 엔트리 포인트를 설정 가능

String, Array, Object형태로 설정 가능

{
  entry: './public/src/index.js',     // String
  ...
}

{
  entry: ['./public/src/index.js'],    // Array
  ...
}

{
  entry: {                            // Object
      './public/src/index.js'
  },
  ...
}

Entry 유형

var config = {
    // #1 - 기본 설정
    entry: './path/file.js'
    // #2 - 앱 로직용, 외부 라이브러리용
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
    // #3 - 페이지별
    entry: {
        pageOne: './src/one/index.js',
        pageTwo: './src/two/index.js',
        pageThree: './src/three/index.js'
    }
};

Multiple Entry points

module.exports = {
    entry: {
        Profile: './profile.js',
        Feed: './feed.js'
    },
    output: {
        path: 'build',
        filename: '[name].js'       // 위에 지정한 entry 키의 이름에 맞춰서 결과 산출
    }
};
// 번들파일 Profile.js를 <script src="build/Profile.js"></script>로 HTML에 삽입