[Webpack] - #5 Plugin

 [ Webpack 시리즈 ]

 

[Webpack] - #1 Webpack이란?

[Webpack] - #2 Entry

[Webpack] - #3 Output

[Webpack] - #4 Loader

[Webpack] - #5 Plugin

[Webpack] - #6 Dev Server

[Webpack] - #7 웹팩 세팅하기 (feat: ES module)

 

 

 

 

Plugin

• 플러그인은 웹팩의 기본동작에 추가기능을 제공하는 속성
• 로더는 파일을 해석하고 변환하는 과정
• 플러그인은 해당 결과물의 형태를 바꾸는 과정

// webpack.config.js

module.exports = {
	plugins: []
}

• 플러그인 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다.

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	plugins: [
    	new HtmlWebpackPlugin(),
        new webpack.ProgressPlugin()
    ]
}

HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인

ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인