반응형 webpack28 20. 웹팩의 확장성과 생태계 - 1 Webpack 플러그인의 활용 웹팩 플러그인은 빌드 과정 중에 여러 작업을 수행하거나 번들 결과물을 최적화하는 데 사용됩니다. 이번 글에서는 몇 가지 유용한 웹팩 플러그인과 그 활용법에 대해 알아보겠습니다. 1. HtmlWebpackPlugin HtmlWebpackPlugin은 HTML 파일을 생성하고 빌드된 번들 파일을 자동으로 삽입해주는 플러그인입니다. 이를 사용하면 빌드된 결과물을 쉽게 확인할 수 있습니다. 설치하기 npm install --save-dev html-webpack-plugin 사용하기 // webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... 다른 설정 ... 2023. 12. 29. 19. Webpack과 프레임워크 통합 - 2 각 프레임워크에 따른 Webpack 설정 웹팩은 다양한 프레임워크와 라이브러리에 대한 모듈 번들링을 지원합니다. 여러 프레임워크를 사용하는 경우, 각각의 특별한 설정이 필요할 수 있습니다. 이번 글에서는 React, Angular, Vue에 대한 웹팩 설정에 대해 알아보겠습니다. 1. React와 Webpack 설정 React 프로젝트에서 웹팩을 사용하려면 다음과 같이 설정할 수 있습니다. 1.1. 필수 의존성 설치 npm install react react-dom npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-react 1.2. 웹팩 설정 파일 (webpack.config.js) const path = .. 2023. 12. 25. 18. Webpack과 프레임워크 통합 - 1 Webpack에서 React, Angular, Vue와의 통합 웹팩은 각종 프레임워크와의 통합을 지원하여, React, Angular, Vue와 같은 인기 있는 프론트엔드 프레임워크와 함께 사용될 수 있습니다. 이번 글에서는 각 프레임워크와의 통합 방법에 대해 알아보겠습니다. 1. React와 함께 사용하기 React는 JSX라는 문법을 사용하므로, Babel과 함께 웹팩에서 사용됩니다. 먼저 필요한 패키지를 설치합니다. npm install react react-dom npm install --save-dev @babel/preset-react 웹팩 설정 파일에 다음과 같이 Babel 프리셋을 추가합니다. // webpack.config.js module.exports = { // ... 다른 설정 m.. 2023. 12. 25. 17. 환경별 설정 (Development, Production) - 3 Webpack의 최적화와 압축 웹팩은 프로젝트를 번들링하고 모듈을 관리하는 강력한 도구이지만, 더 나은 성능을 위해서는 번들된 코드를 최적화하고 압축해야 합니다. 이 글에서는 웹팩을 사용하여 프로젝트를 최적화하고 압축하는 방법에 대해 살펴보겠습니다. 1. Tree Shaking Tree Shaking은 사용되지 않는 코드를 제거하여 번들 크기를 최소화하는 기술입니다. 주로 ES6 모듈 시스템에서 사용되며, 웹팩 설정에서 다음과 같이 활성화할 수 있습니다. // webpack.config.js module.exports = (env, argv) => { return { // ... 다른 설정 optimization: { usedExports: true, }, }; }; 2. 코드 압축 웹팩은 UglifyJ.. 2023. 12. 25. 이전 1 2 3 4 5 6 7 다음 반응형
