webpack - plugin
플러그인
플러그인 역할
플러그인은 번들된 결과물을 처리 ( ↔ 로더는 파일 단위로 처리)
ex) 자바스크립트 난독화 , 특정 텍스트 추출
커스텀 플러그인
만들기
웹팩 문서의 Writing a plugin 을 보면 클래스로 플러그인을 정의
class MyPlugin {
apply(compiler) {
compiler.hooks.done.tap("My Plugin", stats => {
console.log("MyPlugin: done")
})
}
}
module.exports = MyPlugin
webpack.config.js
const MyPlugin = require("./myplugin")
module.exports = {
plugins: [new MyPlugin()],
}
플러그인은 하나로 번들링된 결과물을 대상으로 동작하기 때문에 로그가 한번 찍힘
플러그인이 번들 결과에 접근하는 방법
웹팩 내장 플러그인 BannerPlugin 코드 를 참고
→ compilation 객체를 이용해서 접근
class MyPlugin {
apply(compiler) {
compiler.hooks.done.tap("My Plugin", stats => {
console.log("MyPlugin: done")
})
// compiler.plugin() 함수로 후처리한다
compiler.plugin("emit", (compilation, callback) => {
const source = compilation.assets["main.js"].source()
console.log(source)
callback()
})
}
}
webpack 번들링된 결과물에 banner 추가해보기
myplugin.js
class MyPlugin {
apply(compiler) {
compiler.plugin("emit", (compilation, callback) => {
const source = compilation.assets["main.js"].source();
compilation.assets["main.js"].source = () => {
const banner = [
"/**",
" * 이것은 BannerPlugin이 처리한 결과입니다.",
" * Build Date 2022-06-04",
" */",
].join("\\n");
return banner + "\\n\\n" + source;
};
callback();
});
}
}
module.exports = MyPlugin;
자주 사용하는 플러그인
BannerPlugin
결과물에 빌드 정보나 커밋 버전 등 추가
빌드하고 배포했을때 정적파일들이 잘 배포되었는지 확인
webpack.config.js
const webpack = require("webpack");
const childProcess = require("child_process");
module.exports = {
...
plugins: [
new webpack.BannerPlugin({
banner: `
Build Date: ${new Date().toLocaleString()}
Commit Version: ${childProcess.execSync("git rev-parse --short HEAD")}
Author: ${childProcess.execSync("git config user.name")}
`,
}),
],
};
DefinePlugin
어플리케이션은 개발환경과 운영환경으로 나눠서 운영한다. 가령 환경에 따라 API 서버 주소가 다를 수 있다. 같은 소스 코드를 두 환경에 배포하기 위해서는 이러한 환경 의존적인 정보를 소스가 아닌 곳에서 관리하는 것이 좋다
웹팩은 이러한 환경 정보를 제공하기 위해 DefinePlugin 을 제공
webpack.config.js
const webpack = require("webpack")
export default {
plugins: [
new webpack.DefinePlugin({
TWO: "1+1",
THREE: JSON.stringify("1+1"),
"api.domain": JSON.stringify("<http://dev.api.domain.com>"),
}),
],
}
app.js
console.log(process.env.NODE_ENV); // development
console.log(TWO); // 2
console.log(THREE); // 1+1
console.log(api.domain); // <http://dev.api.domain.com>
HtmlWebpackPlugin
HtmlWebpackPlugin 은 HTML 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 압축할수 있다.
이 플러그인으로 빌드하면 HTML파일로 아웃풋에 생성된다.
→ 유동적으로 HTML 파일을 생성가능
$ npm install -D html-webpack-plugin
src/index.html
<!DOCTYPE html>
<html>
<head>
<title>타이틀<%= env %></title>
</head>
<body>
<!-- 로딩 스크립트 제거 -->
<!-- <script src="dist/main.js"></script> -->
</body>
</html>
<%= env %> 는 전달받은 env 변수 값을 출력한다. HtmlWebpackPlugin은 이 변수에 데이터를 주입시켜 동적으로 HTML 코드를 생성한다.
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports {
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,
}),
// 정적파일 배포할때 캐쉬때문에 브라우저에 바로 반영되지 않는 경우
hash: true, // 정적 파일을 불러올때 쿼리문자열에 웹팩 해쉬값을 추가한다
]
}
CleanWebpackPlugin
빌드 이전 결과물을 제거하는 플러그인 ( dist폴더 삭제 후 재생성)
npm install -D clean-webpack-plugin
webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
plugins: [new CleanWebpackPlugin()],
}
MiniCssExtractPlugin
번들 결과에서 스타일시트 코드만 뽑아서 별도의 CSS파일로 만들어줌
$ npm install -D mini-css-extract-plugin
webpack.config.js
production 환경일 경우만 이 플러그인을 추가 filename 에 설정한 값으로 아웃풋 경로에 생성
프로덕션 환경에서는 별도의 CSS 파일으로 추출하는 플러그인을 적용했으므로 다른 로더가 필요
webpack - plugin
플러그인
플러그인 역할
플러그인은 번들된 결과물을 처리 ( ↔ 로더는 파일 단위로 처리)
ex) 자바스크립트 난독화 , 특정 텍스트 추출
커스텀 플러그인
만들기
웹팩 문서의 Writing a plugin 을 보면 클래스로 플러그인을 정의
class MyPlugin {
apply(compiler) {
compiler.hooks.done.tap("My Plugin", stats => {
console.log("MyPlugin: done")
})
}
}
module.exports = MyPlugin
webpack.config.js
const MyPlugin = require("./myplugin")
module.exports = {
plugins: [new MyPlugin()],
}
플러그인은 하나로 번들링된 결과물을 대상으로 동작하기 때문에 로그가 한번 찍힘
플러그인이 번들 결과에 접근하는 방법
웹팩 내장 플러그인 BannerPlugin 코드 를 참고
→ compilation 객체를 이용해서 접근
class MyPlugin {
apply(compiler) {
compiler.hooks.done.tap("My Plugin", stats => {
console.log("MyPlugin: done")
})
// compiler.plugin() 함수로 후처리한다
compiler.plugin("emit", (compilation, callback) => {
const source = compilation.assets["main.js"].source()
console.log(source)
callback()
})
}
}
webpack 번들링된 결과물에 banner 추가해보기
myplugin.js
class MyPlugin {
apply(compiler) {
compiler.plugin("emit", (compilation, callback) => {
const source = compilation.assets["main.js"].source();
compilation.assets["main.js"].source = () => {
const banner = [
"/**",
" * 이것은 BannerPlugin이 처리한 결과입니다.",
" * Build Date 2022-06-04",
" */",
].join("\\n");
return banner + "\\n\\n" + source;
};
callback();
});
}
}
module.exports = MyPlugin;
자주 사용하는 플러그인
BannerPlugin
결과물에 빌드 정보나 커밋 버전 등 추가
빌드하고 배포했을때 정적파일들이 잘 배포되었는지 확인
webpack.config.js
const webpack = require("webpack");
const childProcess = require("child_process");
module.exports = {
...
plugins: [
new webpack.BannerPlugin({
banner: `
Build Date: ${new Date().toLocaleString()}
Commit Version: ${childProcess.execSync("git rev-parse --short HEAD")}
Author: ${childProcess.execSync("git config user.name")}
`,
}),
],
};
DefinePlugin
어플리케이션은 개발환경과 운영환경으로 나눠서 운영한다. 가령 환경에 따라 API 서버 주소가 다를 수 있다. 같은 소스 코드를 두 환경에 배포하기 위해서는 이러한 환경 의존적인 정보를 소스가 아닌 곳에서 관리하는 것이 좋다
웹팩은 이러한 환경 정보를 제공하기 위해 DefinePlugin 을 제공
webpack.config.js
const webpack = require("webpack")
export default {
plugins: [
new webpack.DefinePlugin({
TWO: "1+1",
THREE: JSON.stringify("1+1"),
"api.domain": JSON.stringify("<http://dev.api.domain.com>"),
}),
],
}
app.js
console.log(process.env.NODE_ENV); // development
console.log(TWO); // 2
console.log(THREE); // 1+1
console.log(api.domain); // <http://dev.api.domain.com>
HtmlWebpackPlugin
HtmlWebpackPlugin 은 HTML 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 압축할수 있다.
이 플러그인으로 빌드하면 HTML파일로 아웃풋에 생성된다.
→ 유동적으로 HTML 파일을 생성가능
$ npm install -D html-webpack-plugin
src/index.html
<!DOCTYPE html>
<html>
<head>
<title>타이틀<%= env %></title>
</head>
<body>
<!-- 로딩 스크립트 제거 -->
<!-- <script src="dist/main.js"></script> -->
</body>
</html>
<%= env %> 는 전달받은 env 변수 값을 출력한다. HtmlWebpackPlugin은 이 변수에 데이터를 주입시켜 동적으로 HTML 코드를 생성한다.
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports {
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,
}),
// 정적파일 배포할때 캐쉬때문에 브라우저에 바로 반영되지 않는 경우
hash: true, // 정적 파일을 불러올때 쿼리문자열에 웹팩 해쉬값을 추가한다
]
}
CleanWebpackPlugin
빌드 이전 결과물을 제거하는 플러그인 ( dist폴더 삭제 후 재생성)
npm install -D clean-webpack-plugin
webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
plugins: [new CleanWebpackPlugin()],
}
MiniCssExtractPlugin
번들 결과에서 스타일시트 코드만 뽑아서 별도의 CSS파일로 만들어줌
$ npm install -D mini-css-extract-plugin
webpack.config.js
production 환경일 경우만 이 플러그인을 추가 filename 에 설정한 값으로 아웃풋 경로에 생성
프로덕션 환경에서는 별도의 CSS 파일으로 추출하는 플러그인을 적용했으므로 다른 로더가 필요
※ 출저
https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의
이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., - 강의 소개 | 인프런...
www.inflearn.com
