출력

<aside> 💡

번들링 후 최종적으로 생성하는 파일 or 디렉토리

</aside>

• 브라우저에서 실행 가능하게 변환 된 JS 코드

출력 설정

번들 파일 이름 설정

단일 엔트리

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

객체 구문

// webpack.config.js
const path = require('path');

module.exports = {
  entry: {
    app: './src/index.tsx',
    adminApp: './src/admin.ts',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

clean - 출력 디렉토리 초기화

// webpack.config.js
module.exports = {
  output: {
    clean: true,
  },
};

파일 이름을 동적으로 설정하고, 성능 향상하기

<aside> 💡

코드 스플리팅과 브라우저 캐시 관리 용이

</aside>

코드 스플리팅