npm install --save-dev text-replace-file-loader

Use the loader either via your webpack config, CLI or inline.

Webpack Config (recommended)

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/,
        use: ['json-loader', 'text-replace-file-loader?name=[name].[ext]']
      }
    ]
  }
}

Example

webpack.config.js

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'something.js',
    publicPath: '/',
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        // This will output both the json and all files the json requires on.
        use: ['file-loader?name=[name].[ext]', 'text-replace-file-loader?name=[name].[ext]']
      }
    ]
  }
}

In your application

const myJson = require('./file.json'); // Can handle any type of file though.

Your Json: file.json

{
  "key1": {
    "key2": {
      "key3": "require('assets/images/image1.png')"
    },
    "key4": "require('assets/index.json')"
  }
}

Output

Directory listing

something.js
image1.png
index.json
file.json

Output Json: dist/file.json

{
  "key1": {
    "key2": {
      "key3": "/image1.png"
    },
    "key4": "/index.json"
  }
}

Note: If publicPath were 'myurl' then it would be 'myurl/image1.png' rather than '/image1.png'

This module has two different options:

• recursion: This sets the behavior when require('.*') statements are encountered. It can be one of three values. The default is 'emit'.
  • 'embed': This embeds imports into the file inline.
  • 'emit': This creates a file in the bundle and replaces the import statement with the public path.
  • 'none': This replaces the import statement with the best-guess at the module-name.
• emit: This determines whether the final document is emitted to the bundle or not. Takes on boolean true or false. The default is true.

Note that for file-emitting operations, this module clones its context and passes it on to file-loader. Because of this, please reference file-loader's main page for information on options and config for emitting files. You can pass these options to this loader when emitting files.

Scott Leland Crossen

http://scottcrossen42.com
[email protected]

Brady Parks, Sydney MacFarlane, John Hancock, Doug Patterson, Megan Parks, Madison Russell