웹팩 설정하기 - 플러그인

앞의 게시물에 이어 이번에는 웹팩에서 플러그인을 설정하는 방법에 대해 정리해보았다.

🔌 플러그인

로더가 여러 형식의 파일들을 모듈로 인식할 수 있게 해주면 이 과정에서 플러그인은 코드 사이의 공백이나 변수명을 바꿔서 파일의 용량을 줄이는 역할같은 것을 해준다.

플러그인을 적용시키는 방법은 webpack.config.js 파일에서 다음과 같은 코드를 추가하면 된다.

이러한 코드를 추가하면 MyPlugin을 추가해주게 된다.

const MyPlugin = require('./MyPlugin');

module.exports = {
  ...,
  plugins: [
  	new MyPlugin(),
  ]
}

1. Banner Plugin

코드가 빌드되어 난독화가 진행된 경우 사람들이 코드를 알아볼 수 없다.

따라서 코드 상단에 누가, 언제 배포했는지 주석으로 달아서 사람들이 알아볼 수 있도록 하는 것을 배너라고 한다.

배너 플러그인은 빌드된 파일에 이러한 배너처리를 해준다.

배너 플러그인은 웹팩에서 기본적으로 지원되는 플러그인이기 때문에 따로 npm(or yarn)을 사용해서 다운받을 필요가 없다.

webpack.config.js 파일에 다음과 같이 코드를 추가하면 적용할 수 있다.

const webpack = require('webpack');

module.exports = {
  ...,
  plugins: [
    new webpack.BannerPlugin({
    	banner: '배너 안에 들어갈 내용',
    })
  ]
}

그 후 파일을 빌드하면 dist 폴더의 main.js 파일 안에서 배너를 확인할 수 있다.

2. Define Plugin

웹을 개발할 때는 실제 배포하는 환경(운영환경)과 개발시 사용하는 환경(개발환경)으로 나눠서 개발할 수 있다.

실제로 나도 쿠키파킹 프로젝트를 하면서 개발환경과 운영환경을 구분하였다.

실제 유저에 의한 데이터와 개발시 사용되는 데이터가 구분되어야 하기 때문에, 개발환경에서는 개발서버 api를 가지고 개발을 진행했기 때문이다.

그래서 배포할 때마다 일일히 실제 api 주소로 코드를 수정하지 않아도 자동으로 환경에 따라 api 주소를 바꿔주는 방법이 필요했었는데, 그때 사용된 것이 바로 이 Define Plugin 이다.

이 플러그인 역시 웹팩에 기본적으로 지원된다.

webpack.config.js에 다음과 같은 코드를 추가하면 사용할 수 있다.

const webpack = require('webpack');

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

이렇게 webpack.DefinePlugin 생성자에 빈 객체를 전달해도 process.env.NODE_ENV가 기본값으로 전달된다.

module.exports 객체의 mode 프로퍼티를 'development'로 설정했다면, process.env.NODE_ENV는 development 값을 가지고 있을 것이다.

const webpack = require('webpack');

module.exports = {
  ...,
  plugins: [
    new webpack.DefinePlugin({
    	VERSIOM: JSON.stringfy("v.1.0.0"),
        API_DOMAIN: JSOM.stringfy("https://dev.api.domains.com"),
        "api_domain": JSON.stringfy("https://dev.api.domains.com")
    })
  ]
}

이렇게 객체안에 프로퍼티를 추가해주는 경우 다른 파일에서 프로퍼티 이름을 전역변수처럼 사용할 수 있다.

3. HTML Webpack Plugin

이 플러그인을 사용하면 html 파일을 동적으로 생성할 수 있다.

먼저 사용을 위해 html-webpack-plugin을 다운받아야 한다.

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' ? '(개발용)' : ''
        },
    })
  ]
}

그 후 index.html 파일 안에

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document<%= env %></title>
</head>
<body>
    <script src="./dist/main.js"></script>
</body>
</html>

<%= env %>를 추가하여 빌드시 플러그인에서 정의한 env를 적용할 수 있다.

그럼 다음과 같이 dist 폴더안에 index,html 파일이 생성된 것을 알 수 있고, env 값으로 '(개발용)'이 들어간 것을 알 수 있다.

그 외에도 유용한 기능을 추가할 수 있다.

배포할 파일에서 코드를 일일히 지우는게 귀찮았었는데, 이 플러그인을 사용하면 그럴 필요가 없다.

다음과 같이 플러그인 설정을 해주면 production 환경에서 빌드시 주석이 파일에서 지워진다.

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

module.exports = {
  ...,
  plugins: [
    new HtmlWebpackPlugin({
    	minify: process.env.NODE_ENV === 'production' ? {
        	removeComments: true,
        } : false,
    })
  ]
}

* production 환경으로 빌드하는 방법은 NODE_ENV=production npm run build(or NODE_ENV=production yarn build) 명령어를 치면 된다.

4. Clean Webpack Plugin

이 플러그인을 사용하면 이전에 빌드했던 결과물을 제거할 수 있다.

만약 이전 빌드 파일에 index.html이 이었는데, 새로 빌드하는 파일에는 index.html이 필요없다면 index.html 파일은 지워져야 할 것이다.

하지만 자동으로 파일이 제거되지 않기 때문에 clean webpack plugin을 사용하여 해결할 수 있다.

먼저 사용을 위해 clean-webpack-plugin을 다운받아야 한다.

webpack.config.js 파일 안에 다음 코드를 추가하면 사용할 수 있다.

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  ...,
  plugins: [
    new CleanWebpackPlugin()
  ]
}

5. Mini Css Extract Plugin

스타일시트가 많아지게 되면 하나의 자바스크립트 코드로 만드는 경우 용량이 너무 커지게 된다.

그런경우 클라이언트가 서버에 요청할 때 이 파일을 받는데 시간이 오래 걸리게 되는데, 즉 렌더링이 느려지게 된다.

따라서 여러 개의 css 파일로 분리하는 것이 이러한 시간을 줄일 수 있을 것이다.

이를 위해 Mini Css Extract Plugin이 필요하다.

먼저 사용을 위해 mini-css-extract-plugin을 다운받아야 한다.

webpack.config.js 파일 안에 다음 코드를 추가하면 사용할 수 있다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  ...,
  plugins: [
    new MiniCssExtractPlugin({ filename: `[name].css` })
  ]
}

이렇게 여러 개의 css 파일로 변환한 경우 style-loader 대신 css-loader가 필요할 것이다.

저작자표시

'웹개발 > 개발환경 설정' 카테고리의 다른 글

storybook에서 public 폴더에 있는 에셋을 사용하고 싶을 때 (0)	2021.08.08
storybook에서 svgr 웹팩 설정이 동작하지 않을 때 (0)	2021.08.05
next.js 에 typescript, storybook 설정하기 (1)	2021.07.25
웹팩 설정하기 (0)	2021.05.06

웹팩 설정하기 - 플러그인

앞의 게시물에 이어 이번에는 웹팩에서 플러그인을 설정하는 방법에 대해 정리해보았다.

🔌 플러그인

로더가 여러 형식의 파일들을 모듈로 인식할 수 있게 해주면 이 과정에서 플러그인은 코드 사이의 공백이나 변수명을 바꿔서 파일의 용량을 줄이는 역할같은 것을 해준다.

플러그인을 적용시키는 방법은 webpack.config.js 파일에서 다음과 같은 코드를 추가하면 된다.

이러한 코드를 추가하면 MyPlugin을 추가해주게 된다.

1. Banner Plugin

코드가 빌드되어 난독화가 진행된 경우 사람들이 코드를 알아볼 수 없다.

따라서 코드 상단에 누가, 언제 배포했는지 주석으로 달아서 사람들이 알아볼 수 있도록 하는 것을 배너라고 한다.

배너 플러그인은 빌드된 파일에 이러한 배너처리를 해준다.

배너 플러그인은 웹팩에서 기본적으로 지원되는 플러그인이기 때문에 따로 npm(or yarn)을 사용해서 다운받을 필요가 없다.

webpack.config.js 파일에 다음과 같이 코드를 추가하면 적용할 수 있다.

그 후 파일을 빌드하면 dist 폴더의 main.js 파일 안에서 배너를 확인할 수 있다.

2. Define Plugin

웹을 개발할 때는 실제 배포하는 환경(운영환경)과 개발시 사용하는 환경(개발환경)으로 나눠서 개발할 수 있다.

실제로 나도 쿠키파킹 프로젝트를 하면서 개발환경과 운영환경을 구분하였다.

실제 유저에 의한 데이터와 개발시 사용되는 데이터가 구분되어야 하기 때문에, 개발환경에서는 개발서버 api를 가지고 개발을 진행했기 때문이다.

그래서 배포할 때마다 일일히 실제 api 주소로 코드를 수정하지 않아도 자동으로 환경에 따라 api 주소를 바꿔주는 방법이 필요했었는데, 그때 사용된 것이 바로 이 Define Plugin 이다.

이 플러그인 역시 웹팩에 기본적으로 지원된다.

webpack.config.js에 다음과 같은 코드를 추가하면 사용할 수 있다.

이렇게 webpack.DefinePlugin 생성자에 빈 객체를 전달해도 process.env.NODE_ENV가 기본값으로 전달된다.

module.exports 객체의 mode 프로퍼티를 'development'로 설정했다면, process.env.NODE_ENV는 development 값을 가지고 있을 것이다.

이렇게 객체안에 프로퍼티를 추가해주는 경우 다른 파일에서 프로퍼티 이름을 전역변수처럼 사용할 수 있다.

3. HTML Webpack Plugin

이 플러그인을 사용하면 html 파일을 동적으로 생성할 수 있다.

먼저 사용을 위해 html-webpack-plugin을 다운받아야 한다.

webpack.config.js 파일 안에 다음 코드를 추가하면 사용할 수 있다.

그 후 index.html 파일 안에

<%= env %>를 추가하여 빌드시 플러그인에서 정의한 env를 적용할 수 있다.

그럼 다음과 같이 dist 폴더안에 index,html 파일이 생성된 것을 알 수 있고, env 값으로 '(개발용)'이 들어간 것을 알 수 있다.

그 외에도 유용한 기능을 추가할 수 있다.

배포할 파일에서 코드를 일일히 지우는게 귀찮았었는데, 이 플러그인을 사용하면 그럴 필요가 없다.

다음과 같이 플러그인 설정을 해주면 production 환경에서 빌드시 주석이 파일에서 지워진다.

* production 환경으로 빌드하는 방법은 NODE_ENV=production npm run build(or NODE_ENV=production yarn build) 명령어를 치면 된다.

4. Clean Webpack Plugin

이 플러그인을 사용하면 이전에 빌드했던 결과물을 제거할 수 있다.

만약 이전 빌드 파일에 index.html이 이었는데, 새로 빌드하는 파일에는 index.html이 필요없다면 index.html 파일은 지워져야 할 것이다.

하지만 자동으로 파일이 제거되지 않기 때문에 clean webpack plugin을 사용하여 해결할 수 있다.

먼저 사용을 위해 clean-webpack-plugin을 다운받아야 한다.

webpack.config.js 파일 안에 다음 코드를 추가하면 사용할 수 있다.

5. Mini Css Extract Plugin

스타일시트가 많아지게 되면 하나의 자바스크립트 코드로 만드는 경우 용량이 너무 커지게 된다.

그런경우 클라이언트가 서버에 요청할 때 이 파일을 받는데 시간이 오래 걸리게 되는데, 즉 렌더링이 느려지게 된다.

따라서 여러 개의 css 파일로 분리하는 것이 이러한 시간을 줄일 수 있을 것이다.

이를 위해 Mini Css Extract Plugin이 필요하다.

먼저 사용을 위해 mini-css-extract-plugin을 다운받아야 한다.

webpack.config.js 파일 안에 다음 코드를 추가하면 사용할 수 있다.

이렇게 여러 개의 css 파일로 변환한 경우 style-loader 대신 css-loader가 필요할 것이다.

'웹개발 > 개발환경 설정' 카테고리의 다른 글

관련글

댓글

티스토리툴바