file-loader does not produce JSON files

When checking with the latest stuff in npm, I cannot get file-loader to emit a JSON file to the destination directory, when said to use a JSON file as input.

Minimal example:

Create a directory with three files, x.json, x.js, and webpack.config.js:

x.json:

{"x": 1}

x.js:

import x from './x.json';

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './x.js',
  output: {
    filename: 'x.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.json$/,
        include: [path.resolve(__dirname, 'src')],
        use: [
          {
            loader: 'file-loader',
            options: {name: '[name].[ext]'}
          }
        ]
      }
    ]
  }
}

I then run:

npm init -y
npm i -D webpack webpack-cli file-loader
node_modules/.bin/webpack --mode development

What I see after typing the last line is:

Hash: 6985c8b31f5eca99bcf1
Version: webpack 4.1.1
Time: 84ms
Built at: 2018-3-12 09:54:36
Asset      Size  Chunks             Chunk Names
 x.js  3.36 KiB    main  [emitted]  main
Entrypoint main = x.js
[./x.js] 26 bytes {main} [built]
[./x.json] 9 bytes {main} [built]

This produces a single file dist/x.js, which "includes" x.json.

I would expect it to produce both dist/x.js and dist/x.json.

@jgbarah

@jgbarah known feat, webpack handle json use own plugins/loaders, use type: "javascript/auto" (as here https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsDefaulter.js#L50). also why you use file-loader?. It is disallow shaking tree.

@evilebottnawi

Thanks @evilebottnawi.

I want to use file-loader because I want the file to be copied to dist, not it to be embedded in the JavaScript bundle. The fact is that, due to the way it is used, afaik I need the app to download a file with that name, with the JSON content in it.

The type: "javascript/auto" you're proposing is for using webpack own plugin/loader instead of `file-loader right? If that's the case, that's not going to work in my case, except if it produces a separate file...

webpack.config.js

{
   type: 'javascript/auto',
   test: /\.json$/,
   use: [ 'file-loader' ],
   include: /\.\/config/  // for e.g, but better to only copy particular JSON files (not all)
}

It works. Thanks!!!

@michael-ciniawsky

@michael-ciniawsky That's great! How can I tell Webpack where to save the file and how should its name be?

            {
                type: 'javascript/auto',
                test: /\.json$/,
                use: ['file-loader'],
                include: /\/dir\/.*\.json$/,
                options: {
                    name: 'static/json/[name].[hash:8].[ext]',
                }
            },

Tried this but it doesn't work, I get the following error:


options/query provided without loader (use loader + options) in {
  "type": "javascript/auto",
  "test": {},
  "use": [
    "file-loader"
  ],
  "include": {},
  "options": {
    "name": "static/json/[name].[hash:8].[ext]"
  }
}

@tonix-tuft

@tonix-tuft

Try this:

{
    type: "javascript/auto",
    test: /\.json$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "[path][name].[ext]",
            },
        },
    ],
},

Navigation Menu

Repository navigation

file-loader does not produce JSON files #264

Minimal example:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

file-loader does not produce JSON files #264

Description

Minimal example:

Activity

alexander-akait commented on Mar 12, 2018

jgbarah commented on Mar 12, 2018

michael-ciniawsky commented on Mar 12, 2018

jgbarah commented on Mar 12, 2018

tonix-tuft commented on Oct 1, 2019

Mydayyy commented on Oct 11, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions