This plugin uses JSON.stringify() to minify your JSON.
To begin, you'll need to install json-minimizer-webpack-plugin:
$ npm install json-minimizer-webpack-plugin --save-dev
Then add the plugin to your webpack configuration. For example:
webpack.config.js
const JsonMinimizerPlugin = require('json-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
module: {
loaders: [
{
test: /\.json/i,
type: 'javascript/auto',
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
],
},
],
},
plugins: [
new CopyPlugin({
patterns: [
{
context: path.resolve(__dirname, 'dist'),
from: './src/*.json',
},
],
}),
],
optimization: {
minimize: true,
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`
new JsonMinimizerPlugin(),
],
},
}; This will enable JSON optimization only in production mode. If you want to run it also in development set the optimization.minimize option to true.
And run webpack via your preferred method.
testType: String|RegExp|Array<String|RegExp> - default: /\.json(\?.*)?$/i
Test to match files against.
module.exports = {
optimization: {
minimize: true,
minimizer: [
new JsonMinimizerPlugin({
test: /\.foo\.json/i,
}),
],
},
}; includeType: String|RegExp|Array<String|RegExp> Default: undefined
Files to include.
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new JsonMinimizerPlugin({
include: /\/includes/,
}),
],
},
}; excludeType: String|RegExp|Array<String|RegExp> Default: undefined
Files to exclude.
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new JsonMinimizerPlugin({
exclude: /\/excludes/,
}),
],
},
}; cache⚠ Ignored in webpack 5! Please use https://webpack.js.org/configuration/other-options/#cache.
Type: Boolean|String Default: true
Enable file caching. Default path to cache directory: node_modules/.cache/json-minimizer-webpack-plugin.
BooleanEnable/disable file caching.
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new JsonMinimizerPlugin({
cache: true,
}),
],
},
}; StringEnable file caching and set path to cache directory.
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new JsonMinimizerPlugin({
cache: 'path/to/cache',
}),
],
},
}; cacheKeys⚠ Ignored in webpack 5! Please use https://webpack.js.org/configuration/other-options/#cache.
Type: Function<(defaultCacheKeys, file) -> Object> Default: defaultCacheKeys => defaultCacheKeys
Allows you to override default cache keys.
Default cache keys:
({
'json-minimizer-webpack-plugin': require('../package.json').version, // plugin version
'json-minimizer-webpack-plugin-options': this.options, // plugin options
nodeVersion: process.version, // Node.js version
assetName: file, // asset path
contentHash: crypto.createHash('md4').update(input).digest('hex'), // source file hash
}); webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new JsonMinimizerPlugin({
cache: true,
cacheKeys: (defaultCacheKeys, file) => {
defaultCacheKeys.myCacheKey = 'myCacheKeyValue';
return defaultCacheKeys;
},
}),
],
},
}; minimizerOptionsType: Object Default: { replacer: null, space: null }
JSON.stringify() options.
module.exports = {
optimization: {
minimize: true,
minimizer: [
new JsonMinimizerPlugin({
minimizerOptions: {
space: '\t',
},
}),
],
},
}; Please take a moment to read our contributing guidelines if you haven't yet done so.