webpack - plugin
플러그인
플러그인 역할
플러그인은 번들된 결과물을 처리 ( ↔ 로더는 파일 단위로 처리)
ex) 자바스크립트 난독화 , 특정 텍스트 추출
커스텀 플러그인
만들기
웹팩 문서의 Writing a plugin 을 보면 클래스로 플러그인을 정의
class MyPlugin apply (compiler )"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 )"My Plugin" , stats =>console .log("MyPlugin: done" )
})
compiler.plugin("emit" , (compilation, callback ) => {
const source = compilation.assets["main.js" ].source()
console .log(source)
callback()
})
}
}
webpack 번들링된 결과물에 banner 추가해보기
myplugin.js
class MyPlugin {"emit" , (compilation, callback) =>"main.js" ].source();
compilation.assets["main.js" ].source = () =>"/**" ,
" * 이것은 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);
console.log (TWO);
console.log (THREE);
console.log (api.domain);
HtmlWebpackPlugin
HtmlWebpackPlugin 은 HTML 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 압축할수 있다.
이 플러그인으로 빌드하면 HTML파일로 아웃풋에 생성된다.
→ 유동적으로 HTML 파일을 생성가능
$ npm install - D html- webpack- plugin
src/index.html
<!DOCTYPE html >
<html >
<head >
<title > 타이틀<%= env %></title >
</head >
<body >
</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 )"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 )"My Plugin" , stats =>console .log("MyPlugin: done" )
})
compiler.plugin("emit" , (compilation, callback ) => {
const source = compilation.assets["main.js" ].source()
console .log(source)
callback()
})
}
}
webpack 번들링된 결과물에 banner 추가해보기
myplugin.js
class MyPlugin {"emit" , (compilation, callback) =>"main.js" ].source();
compilation.assets["main.js" ].source = () =>"/**" ,
" * 이것은 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);
console.log (TWO);
console.log (THREE);
console.log (api.domain);
HtmlWebpackPlugin
HtmlWebpackPlugin 은 HTML 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 압축할수 있다.
이 플러그인으로 빌드하면 HTML파일로 아웃풋에 생성된다.
→ 유동적으로 HTML 파일을 생성가능
$ npm install - D html- webpack- plugin
src/index.html
<!DOCTYPE html >
<html >
<head >
<title > 타이틀<%= env %></title >
</head >
<body >
</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
