Webpack Plugins

Using plugins to enhance functionality

HTML Plugin

npm install html-webpack-plugin # install
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html' # generate HTML
    })
]

Clean Plugin

npm install clean-webpack-plugin # install
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin() # clean dist before build
]

Mini CSS Extract

npm install mini-css-extract-plugin # install
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].css' # extract CSS to file
    })
]

Define Plugin

const webpack = require('webpack');
plugins: [
    new webpack.DefinePlugin({
        'process.env.API_URL': JSON.stringify('https://api.example.com')
    })
]

Copy Plugin

npm install copy-webpack-plugin # install
const CopyPlugin = require('copy-webpack-plugin');
plugins: [
    new CopyPlugin({
        patterns: [{ from: 'public', to: 'dist' }]
    })
]