web-dev-qa-db-fra.com

Charger un fichier JSON statique dans Webpack

J'ai quelque part dans mon code après la construction:

var getMenu = function () {
    return window.fetch("portal/content/json/menu.json").then(function (data) {
        return data.json();
    });
};

J'ai essayé dans mon webpack.config.js ceci:

module: {
    loaders: [
        ...
        {
            test: /\.json$/,
            exclude: /node_modules/,
            use: [
                'file-loader?name=[name].[ext]&outputPath=portal/content/json'
            ]
        },
        ...
   ]
}

Structure du projet :

dist
  content
     json
        menu.json <- this is missing

src
  content
     json
       menu.json <- source file

Question:

Comment le pack Web peut-il copier src/content/json/menu.json à dist/content/json/menu.json?

javascriptangularjsjsonwebpack
14
Leguest

Vous utilisez fetch pour demander un fichier JSON, ce qui ne se produira qu'au moment de l'exécution. De plus, webpack ne traite que tout ce qui est importé. Vous vous attendiez à ce qu'il gère un argument pour une fonction, mais si Webpack le faisait, chaque argument d'une fonction serait considéré comme un module et romprait toute utilisation de cette fonction.

Si vous souhaitez que vos chargeurs entrent en jeu, vous pouvez importer le fichier.

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

Vous pouvez également importer le fichier JSON et l'utiliser directement au lieu de le récupérer à l'exécution. Webpack 2 utilise json-loader par défaut pour tous les fichiers .json. Vous devez supprimer la règle .json et importer le JSON comme suit.

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

menu est le même objet JavaScript que vous obtiendriez de votre fonction getMenu.

26
Michael Jungo

si vous souhaitez que votre fichier json soit chargé au moment de l'exécution/différé, vous pouvez utiliser les propriétés impressionnantes de dynamic imports :

import(
    /* webpackChunkName: "json_menu" */
    './portal/content/json/menu.json'
);

il retournera une promesse qui résoudra l'objet du module, avec le champ "default" contenant vos données. Donc, vous voudrez peut-être quelque chose comme ça (avec es6 ça a l'air vraiment gentil):

import(
    /* webpackChunkName: "json_menu" */
    './portal/content/json/menu.json'
).then(({default: jsonMenu}) => {
    // do whatever you like with your "jsonMenu" variable
    console.log('my menu: ', jsonMenu);
});

Notez que les importations dynamiques nécessitent un plugin babel syntax-dynamic-import, installez-le avec npm:

npm i babel-plugin-syntax-dynamic-import -D

Bonne journée

1
Roman86