인프런 - 프론트엔드 개발환경의 이해와 실습-03

플러그인

로더가 각 파일을 처리하는 반면 플러그인은 번들된 결과물을 처리

• 자바스크립트 난독화
• 특정 텍스트 추출

// my-webpack-plugin
class MyWebpackPlugin {
    apply(compiler) {
        compiler.plugin('emit', (compilation, callback) => {
            const source = compilation.assets['main.js'].source(); // 번들링된 main.js 소스코드 가져오는 코드
            compilation.assets['main.js'].source = () => {
                const banner = [
                    '/**',
                    ' * 이것은 BannerPlugin이 처리한 결과입니다.',
                    ' * Build Date: 2020-01-01',
                    '*/'
                ].join('\n');
                return banner + '\n\n' + source; // 원본소스코드에 주석문 추가
            }

            callback();
        })
    }
}

module.exports = MyWebpackPlugin;

// webpack.config.js
const MyWebpackPlugin = require('./my-webpack-pluigin');

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

$ npm run build

// dist/main.js

/**,
* 이것은 BannerPlugin이 처리한 결과입니다.,
* Build Date: 2020-01-01,
*/

...

자주사용하는 플러그인

• BannerPlugin
• DefinePlugin
• HtmlWebpackPlugin
• CleanWebpackPlugin
• MiniCssExtraPlugin

BannerPlugin (webpack 기본제공 플러그인)

결과물에 빌드 정보나 커밋 버전같은걸 추가 할 수 있다.

// webpack.config.js
mobule.exports = {
    ....
    plugins: [
        new webpack.BannerPlugin({
            banner: '이것은 배너입니다.'
        })
    ]
}

$ npm run build
// dist/main.js
/* 이것은 배너입니다. */ <===== 추가됨

DefinePlugin (webpack 기본제공 플러그인)

같은소스를 두 환경에서 배포하기위해 환경의존적인 정보를 소스가 아닌곳에서 관리할 수 있도록 해주는 플러그인

// webpack.config.js
mobule.exports = {
    mode: 'development',
    ....
    plugins: [
        new webpack.DefinePlugin({
            TEST1: '1+1',
            TEST2: JSON.stringify('1+1'),
            'api.domain': JSON.stringify('http://dev.api.domain.com')
        })
    ]
}

// app.js
console.log(process.env.NODE_ENV) // "development"
console.log(process.env.TEST1) // "2"
console.log(process.env.TEST2) // "1+1"
console.log(api.domain) // http://dev.api.domain.com

HtmlWebpackPlugin

Html 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 입력할 수 있다.

$ npm i -D html-webpack-plugin

// webpack.config.js
const HtmlWebpackPLugin = require('html-webpack-plugin')

mobule.exports = {
    mode: 'development',
    ....
    plugins: [
        new HtmlWebpackPLugin({
            template: './src/index.html',
            templateParameters: {
                env: process.env.NODE_ENV === 'development' ? '(개발용)' : '' // html 파일 내부에 변수로 추가하여 사용이 가능
            },
            minify: process.env.NODE_ENV === 'production' ? {
                collapseWhitespace: true, // 빈칸제거
                removeCpmments: true, // 주석제거
            } : false
        })
    ]
}

// 실행
$ NODE_ENV=development npm run build

<!-- dist/index.html -->
<script type="text/javascript" src="main.js"></script> <!-- <=== 자동으로 생성 -->

CleanWebpackPlugin

빌드 이전 결과물을 제거하는 플러그인. 빌드결과물은 아웃풋경로에 모이는데 과거 파일이 남아있을수있어 전체 제거후 다시 빌드한 결과물을 가질 수 있도록 하는 플러그인

$ npm i -D clean-webpack-plugin

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // default export 가 아니라 {} 로 감싸줘야함

mobule.exports = {
    mode: 'development',
    ....
    plugins: [
        new CleanWebpackPlugin()
    ]
}

MiniCssExtraPlugin

스타일시트가 많아지면서 하나의 자바스크립트 코드로 만드는것은 부담일 수 있다. 변들결과에서 스타일시트의 코드만 뽑아서 별도의 CSS 파일로 만들어 역할에 따라 분리하는게 좋다. 브라우저에서 큰 파일 하나보다는 작은파일 여러개를 동시에 다운받는게 더 낫기 떄문에 개발환경은 상관없어도 프로덕션환경에서는 분리해서 빌드되도록 하는것이 효과적이다. 이 플러그인은 CSS 를 별도로 뽑아내는 플러그인이다.

$ npm i -D mini-css-extract-plugin

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin') 

mobule.exports = {
    mode: 'development',
    ....
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    process.env.NODE_ENV === 'production'
                    ? MiniCssExtractPlugin.loader
                    : 'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
    ...
    plugins: [
        process.env.NODE_ENV === 'production' 
        ? [new MiniCssExtractPlugin({ filename: '[name].css' })] 
        : [],
    ]
}