How do I build a JSON file with webpack?

Question

I'd like to assemble a manifest.json file, as used by Chrome extensions, in a "smarter," programmatic sort of way. I'm using npm for my dependency resolution, and its package.json includes some shared fields with the manifest.json file, including "name," "description," and "version."

Is there a way to define something like a partial manifest.json file which includes all the Chrome-specific stuff, but fill in shared values where appropriate? I've found that this is pretty straightforward in Gulp:

var gulp = require('gulp'); var fs = require('fs'); var jeditor = require('gulp-json-editor');  gulp.task('manifest', function() {     var pkg = JSON.parse(fs.readFileSync('./package.json'));     gulp.src('./manifest.json')       .pipe(jeditor({         'name': pkg.name,         'description': pkg.description,         'version': pkg.version,         'author': pkg.author,         'homepage_url': pkg.homepage,       }))       .pipe(gulp.dest("./dist")); }); 

Even if there's some npm package out there designed for this purpose, can someone explain to me how something like this might be done generally? I know Webpack 2 has a built-in json loader, but I'm not clear how it would be used in a case like this.

Answer 1

There is actually a more elegant solution than the one by @user108471 (although it is inspired by it), and that is to use the copy-webpack-plugin. With its transform ability, you can add the desired values to the manifest.json on the fly before copying it to its destination.

It has two advantages:

• it doesn't generate an extra unnecessary manifest.js-bundle (@bronson's solution also fixes this)
• you don't need to require the manifest.json in some other .js-file (which would seem semantically backwards to me)

A minimal setup could be this:

webpack.config.js

// you can just require .json, saves the 'fs'-hassle let package = require('./package.json');  function modify(buffer) {    // copy-webpack-plugin passes a buffer    var manifest = JSON.parse(buffer.toString());     // make any modifications you like, such as    manifest.version = package.version;     // pretty print to JSON with two spaces    manifest_JSON = JSON.stringify(manifest, null, 2);    return manifest_JSON; }   module.exports = {     // ...     plugins: [       new CopyWebpackPlugin([          {             from: "./src/manifest.json",             to:   "./dist/manifest.json",             transform (content, path) {                 return modify(content)             }          }])    ]  }