Minify JSON and copy the result to file using Webpack? - json

Question

I have a couple of language files that I just copy to a location on disk, and I need to continue to do so for now.
The problem is that they're not minified and I would like to do so using WebPack 3.X as this is what we use... :)
Something like https://www.npmjs.com/package/grunt-jsonmin but without the grunt part.
What I have:
Uncompressed JSON in src/lang/*.json
What I want:
Compressed JSON in dist/lang/*.json
/J

Answer 1

This is kind of old, but if anyone is still pondering, here's how I did it:
// npm i -D node-json-minify copy-webpack-plugin
//webpack.config.js
const JSONMinifyPlugin = require('node-json-minify'),
CopyWebpackPlugin = require('copy-webpack-plugin');
options.plugins = [
new CopyWebpackPlugin([
{
/* i18n */
from: path.join(__dirname, 'src', '_locales'),
transform: function(content) {
// minify json
return JSONMinifyPlugin(content.toString());
},
to: path.join(__dirname, 'build', '_locales')
}
])
]

Answer 2

In webpack 5 you can use JsonMinimizerWebpackPlugin.
It works for both rules and CopyPlugin.
const JsonMinimizerPlugin = require("json-minimizer-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.json$/i,
type: "asset/resource",
},
],
},
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(),
],
},
};