Load static JSON file in Webpack

angularjs, javascript, json, webpack

Solution

You're using `fetch` to request a JSON file and that will only happen at runtime. Furthermore, webpack only processes anything that is imported. You expected it to handle an argument to a function, but if webpack did that, every argument to a function would be considered a module and that breaks any other use for that function.

If you want your loaders to kick in, you can import the file.

import './portal/content/json/menu.json';

You can also import the JSON and use it directly instead of fetching it a runtime. Webpack 2 uses `json-loader` by default for all `.json` files. You should remove the `.json` rule and you would import the JSON as follows.

import menu from './portal/content/json/menu.json';

`menu` is the same JavaScript object that you would get from your `getMenu` function.

Problem

I have somewhere in my code following construction: ``` var getMenu = function () { return window.fetch("portal/content/json/menu.json").then(function (data) { return data.json(); }); }; ``` I tried in my `webpack.config.js` this: ``` module: { loaders: [ ... { test: /\.json$/, exclude: /node_modules/, use: [ 'file-loader?name=[name].[ext]&outputPath=portal/content/json' ] }, ... ] } ``` Project structure: ``` dist content json menu.json <- this is missing src content json menu.json <- source file ``` Question: How can webpack copy `src/content/json/menu.json` to `dist/content/json/menu.json` ?

Original source