[프론트엔드 개발환경과 실습] Webpack #4
👩💻 인프런 강의
Webpack Plugin
- 번들된 결과물을 난독화하거나 특정 텍스트를 추출하는데 사용
- 플러그인은 Class로 제작
- appply 함수를 구현, 인자로 받은 compiler 객체 안에 있는 tap() 함수를 사용
- 플러그인 작업이 완료되는 시점 = Done
- 번들된 결과물에 접근 = compilation
자주 사용하는 플러그인
환경변수 노출
webpack.config.js 👇
module.exports = {
mode: "development",
}
console.log(process.env.NODE_ENV);
HtmlTemplatePlugin
- 써드 파티 패키지이기 때문에 설치 필수
- npm install html-webpack-plugin
- HTML 파일을 후처리하는데 사용, 빌드 타임의 값을 넣거나 코드를 압축
- esj 문법을 사용하여 <%= env %> 는 전달받은 env 변수 값을 출력
<title>검색<%= env %></title>
=>Title(개발용)
webpack.config.js 👇
const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 템플릿 경로를 지정
templateParameters: { // 템플릿에 주입할 파라미터 변수 지정
env: process.env.NODE_ENV === 'development' ? '(개발용)' : ''
},
minify: process.env.NODE_ENV === 'production' ? {
collapseWhitespace: true, // 빈칸 제거
removeComments: true // 주석 제거
} : false
})
]
CleanWebpackPlugin
- 빌드 이전 결과물(output) 제거
- npm install clean-webpack-plugin
webpack.config.js 👇
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
new CleanWebpackPlugin ()
MiniCssExtractPlugin
- 스타일시트 코드만 뽑아서 별도의 CSS 파일로 만들어줌
- npm install mini-css-extract-plugin
webpack.config.js 👇
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module: {
rules: [
{
test: /\.css$/,
use: [
process.env.NODE_ENV === 'production'
? MiniCssExtractPlugin.loader // 프로덕션 환경
: "style-loader", // 개발 환경
"css-loader"
]
}
]
}
...(process.env.NODE_ENV === 'production' // 프로덕션 환경일 경우만 이 플러그인을 추가
? [new MiniCssExtractPlugin({filename: '[name].css'})]
: []
)
** MiniCssExtractPlugin.loader : 개발 환경에서는 css-loader에의해 자바스크립트 모듈로 변경된 스타일시트를 적용하기위해 style-loader를 사용. 프로덕션 환경에서는 별도의 CSS 파일으로 추출하는 플러그인을 적용했으므로 다른 로더가 필요
Author And Source
이 문제에 관하여([프론트엔드 개발환경과 실습] Webpack #4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seungmidev/프론트엔드-개발환경과-실습-Webpack-4저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)