A simple webpack plugin that minifies assets (
js,css,json) that weren't processed by webpack
Say, you have some js, css or json files in your project which shouldn't be processed by webpack's loaders/plugins, so you copy them from one place to another using copy-webpack-plugin. Chances are, you want those files to be minified after you copy them. And that's exactly what this plugin is for! Of course, you can achieve the same thing using the transform option for copy-webpack-plugin, but sometimes you simply don't have access to copy-webpack-plugin's options (for example, if you're using @angular/cli to build your project).
Using yarn:
yarn add minify-bundled-webpack-plugin -DOr npm:
npm i minify-bundled-webpack-plugin -Dconst CopyPlugin = require('copy-webpack-plugin');
const MinifyBundledPlugin = require('minifiy-bundled-webpack-plugin');
module.exports = {
mode: 'production',
context: path.join(__dirname, 'src'),
entry: './src',
output: {
path: path.join(__dirname, 'dist'),
filename: './[name].[chunkhash].js',
},
plugins: [
new CleanPlugin(),
new CopyPlugin([
{
from: path.join(__dirname, 'src/assets/*'),
to: path.join(__dirname, 'dist/assets'),
context: 'src',
},
]),
new MinifyBundledPlugin({
// Specify the files to minifiy after they're copied
patterns: ['**/assets/*.+(json|css|js)'],
}),
/*
You can use https://github.com/Klathmon/imagemin-webpack-plugin for minification of 'non-webpack' images
new ImageminPlugin({ test: /\.(svg|jpe?g|png)$/ })
*/
],
};new MinifyBundledPlugin(options)
options
{
patterns: string[] | string;
exclude?: string;
csso?: object;
terser?: object;
}