Install

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

Usage

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

Webpack Config (recommended)

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.json$/,
6        use: ['json-loader', 'text-replace-file-loader?name=[name].[ext]']
7      }
8    ]
9  }
10}

Example

Example

webpack.config.js

1module.exports = {
2  output: {
3    path: path.resolve(__dirname, 'dist'),
4    filename: 'something.js',
5    publicPath: '/',
6  },
7  module: {
8    loaders: [
9      {
10        test: /\.json$/,
11        // This will output both the json and all files the json requires on.
12        use: ['file-loader?name=[name].[ext]', 'text-replace-file-loader?name=[name].[ext]']
13      }
14    ]
15  }
16}

In your application

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

Your Json: file.json

1{
2  "key1": {
3    "key2": {
4      "key3": "require('assets/images/image1.png')"
5    },
6    "key4": "require('assets/index.json')"
7  }
8}

Output

Directory listing

1something.js
2image1.png
3index.json
4file.json

Output Json: dist/file.json

1{
2  "key1": {
3    "key2": {
4      "key3": "/image1.png"
5    },
6    "key4": "/index.json"
7  }
8}

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

Options & Config

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.

Contributors

Scott Leland Crossen

http://scottcrossen42.com
scottcrossen42@gmail.com

Special Thanks

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