How do I build a JSON file with webpack?

webpack json-loader
webpack create json file
create-react-app json-loader
webpack move json files
webpack plugin generate file
webpack plugins
webpack basics

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'));
        'description': pkg.description,
        'version': pkg.version,
        'homepage_url': pkg.homepage,

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.

json-loader, Since webpack >= v2.0.0 , importing of JSON files will work by default. file.json'​);. webpack.config.js module.exports = { module: { loaders: [ { test: /\.json$/,  npm install--save-dev json-loader ⚠️ Since webpack >= v2.0.0 , importing of JSON files will work by default. You might still want to use this if you use a custom file extension.

Credit to Sean Larkin from the Webpack project for reaching out to me and helping me figure out how to get this done. I needed to create a custom loader to handle reading the existing manifest.json and adding my fields of interest to it.

// File: src/manifest-loader.js

const fs = require('fs');

// A loader to transform a partial manifest.json file into a complete
// manifest.json file by adding entries from an NPM package.json.
module.exports = function(source) {
  const pkg = JSON.parse(fs.readFileSync('./package.json'));
  const merged = Object.assign({}, JSON.parse(source), {
    'description': pkg.description,
    'version': pkg.version,
    'homepage_url': pkg.homepage,
  const mergedJson = JSON.stringify(merged);
  // In Webpack, loaders ultimately produce JavaScript. In order to produce
  // another file type (like JSON), it needs to be emitted separately.
  this.emitFile('manifest.json', mergedJson);
  // Return the processed JSON to be used by the next item in the loader chain.
  return mergedJson;

Then configure webpack to use my custom manifest-loader.

// File: webpack.config.js

const path = require('path');

module.exports = {
  // Tell Webpack where to find our custom loader (in the "src" directory).
  resolveLoader: {
    modules: [path.resolve(__dirname, "src"), "node_modules"]

  // The path to the incomplete manifest.json file.
  entry: "./manifest.json",
  output: {
    // Where the newly built manifest.json will go.
    path: path.resolve(__dirname, 'dist'),
    // This file probably won't actually be used by anything.
    filename: "manifest.js",

  module: {
    rules: [
        // Only apply these loaders to manifest.json.
        test: /manifest.json$/,
        // Loaders are applied in reverse order.
        use: [
          // Second: JSON -> JS
          // First: partial manifest.json -> complete manifest.json

The result, when running Webpack, is a dist/ directory containing manifest.js and manifest.json, with manifest.json containing everything from the original, top-level manifest.json plus the additional info from package.json. The extra manifest.js is a script that exposes the contents of manifest.json to any other JavaScript in the project that wants it. This is probably not too useful, but a Chrome extension might conceivably want to require this in a script somewhere to expose some of this information in a friendly way.

Stats Data, When compiling source code with webpack, users can generate a JSON file containing statistics about modules. These statistics can be used to analyze an  Instead it keeps and serves the resulting files from memory.” — This means that you will not see the webpack-dev-server build in bundle.js, to see and run the build, you must still run the webpack command. With Webpack dev server running, you will notice that if you go back to your app and make a change,

My solution in Webpack 4 below. It's a generic solution for generating json files using Webpack loaders, but it works well for manifest.json files as well.

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const resolve = require("path").resolve;

module.exports = {
    entry: {
        entry: resolve(__dirname, "app/main.js"),
    module: {
        rules: [
                test: /manifest\.js$/,
                use: ExtractTextPlugin.extract({
                    use: []  // Empty array on purpose.
            test: /\.png$/,
            use: [{
                loader: "file-loader",
                options: {
                    context: resolve(__dirname, "app"),
                    name: "[path][name].[ext]",
                    publicPath: "/",
    output: {
        filename: "[name].js",
        path: resolve(__dirname, 'dist'),
    plugins: [
        new webpack.EnvironmentPlugin(["npm_package_version"]),  // automagically populated by webpack, available as process.env.npm_package_version in loaded files.
        new ExtractTextPlugin("manifest.json"),
const manifest = require('./manifest.js');

// Other parts of app …
const icon = require('./icon.png');  

const manifestData = {  
    icon: {"128": icon},  // icon.png will be in the emitted files, yay!
    version: process.env.npm_package_version,  // See webpack.config.js plugins
    // other manifest data …

// Whatever string you output here will be emitted as manifest.json:
module.exports = JSON.stringify(manifestData, null, 2);
package.json dependencies
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "1.1.11",
    "webpack": "4.12.0",

generate-json-webpack-plugin, new GenerateJsonPlugin('my-file.json', {. foo: 'bar'. }) ] // };. This will create a file my-file.json in webpack's output directory, with contents:. Under the hood, it relies on a dependency graph. A dependency graph describes how modules relate to each other using the references ( require and import statements) between files. In this way, webpack statically traverses all modules to build the graph, and uses it to generate a single bundle (or several bundles)

I was using your script enough that I published a somewhat modified version of it on NPM:

Hope it's as easy as yarn add -D manifest-package-loader and updating your webpack.config.js.

Coincidentally, just this morning I ran across chem-loader, which might also work:

generate-json-file-webpack-plugin, Need private packages and team management tools?Check out npm Teams ». generate-json-file-webpack-plugin. 0.0.3 • Public • Published 2  I have two files that I distribute that have the build number from the viewpoint of both git and npm (package.json). I'd still like to pull this into my index.template.html in a meta tag, but haven't figured that out yet (how can I make a DEFINE from file contents or a cmd output?).

Try this package,you can read your json file, and after than build new json after you customize with it.

Webpack 4.0 file-loader json issue · Issue #6586 · webpack , json")) that will allow me to keep my build working. If webpack in version 4 doen't try to parse a JSON file when using a loader on it as for version  Webpack will generate the files and put them in the /dist folder for you, but it doesn't keep track of which files are actually in use by your project. In general it's good practice to clean the /dist folder before each build, so that only used files will be generated. Let's take care of that.

elliottsj/generate-json-webpack-plugin: Webpack plugin to , Contribute to elliottsj/generate-json-webpack-plugin development by creating an This will create a file my-file.json in webpack's output directory, with contents:. However, it will assume the entry point of your project is src/index and will output the result in dist/main.js minified and optimized for production. Usually your projects will need to extend this functionality, for this you can create a webpack.config.js file in the root folder and webpack will automatically use it.

How to load a JSON content inside a js module with Webpack , Cool, isn't it? What Webpack does being the scenes is converting the JSON file into a JS module and adding it to your build result: Custom parameters can be passed to webpack by adding two dashes between the npm run build command and your parameters, e.g. npm run build -- --colors. Conclusion Now that you have a basic build together you should move on to the next guide Asset Management to learn how to manage assets like images and fonts with webpack.

New features and updates in Webpack 4, index.js console.log("This is our test file, webpack is supposed to see this"). Next, create a package.json file and in there paste the following: Basically, when you run webpack, it will bundle your various js files and create a file called bundle.js Let’s go ahead and do that. The webpack documentation says to run the command webpack in

  • How funny - I have the exact same problem and I googled "webpack write json file" and this post came up! Thanks :)
  • me too, landed on this page looking for "webpack convert js to json" whil actually checking very same problem )
  • Hey, thank you for this. I actually do like having the manifest.js available for some convenient in-app reporting, but this is definitely the more direct solution. I'd actually be curious to dig into the plugin and find out how it works, since enough people had the same specific manifest.json need that it might justify a plugin just to handle this specific case.
  • This is EXACTLY the solution I needed. +1
  • This is cool, just want to note that I received an obscure error apparently on the toString() line when I used a babel config via webpack.config.babel.js. The error was "Cannot find module 'core-js/modules/'" and my solution was to remove .babel from the config file name =)
  • its fixed? or you can try webpack with gulp if you want so you can use this package gulp-json-editor if u want.
  • @RahmatAligos Thanks, but my goal was to simplify my build process so that I would not have to use both Gulp and Webpack. This was one of the few issues preventing me from switching, and the custom loader solution here solves my problem.
  • This is a great solution! I used file-loader instead of json-loader so I don't get manifest.js and made a few other tweaks: Huge thanks for answering your own question.
  • @bronson I'm glad it helped someone else. I noticed a comment on your gist about needing to import manifest.json to make your solution work, and I think I know the fix: name "manifest.json" as one of your entry points in your webpack config.
  • Yes, putting 'manifest.json' as an entrypoint creates the manifest.json file, but it also creates manifest.bundle.js. (couldn't find any way around this) I figured placing an import in my topmost js file was less weird than having an unused file end up in my build. It's a matter of taste I suppose. :)
  • I've come across that before, and I could not work out how to use that to write a new JSON file. Can you provide a configuration example for how to use that to solve this problem?