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' }]
})
]