web-dev-qa-db-ja.com

Webpackに静的JSONファイルを読み込む

私のコードのどこかに構築後があります：

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

私は私のwebpack.config.js この：

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

プロジェクト構造：

dist
  content
     json
        menu.json <- this is missing

src
  content
     json
       menu.json <- source file

質問：

Webpackはどのようにコピーできますかsrc/content/json/menu.jsonからdist/content/json/menu.json？

javascriptangularjsjsonwebpack
15
Leguest

fetchを使用してJSONファイルを要求していますが、これは実行時にのみ発生します。さらに、webpackはインポートされたもののみを処理します。関数への引数を処理することを期待していましたが、webpackがそれを実行した場合、関数へのすべての引数はモジュールと見なされ、その関数の他の使用が中断されます。

ローダーを起動したい場合は、ファイルをインポートできます。

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

JSONをインポートして、ランタイムを取得する代わりに直接使用することもできます。 Webpack 2は、すべてのjson-loaderファイルに対してデフォルトで .json を使用します。 .jsonルールを削除し、次のようにJSONをインポートする必要があります。

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

menuは、getMenu関数から取得するJavaScriptオブジェクトと同じです。

31
Michael Jungo

jsonをランタイム/遅延でロードしたい場合は、素晴らしいwebpackの 動的インポート 機能を使用できます：

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

モジュールオブジェクトに解決されるPromiseが返され、「デフォルト」フィールドにデータが含まれます。したがって、次のようなものが必要になる場合があります（es6では、本当にすてきに見えます）。

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);
});

動的インポートにはbabelプラグインが必要であることに注意してくださいsyntax-dynamic-import、npmでインストールします。

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

ごきげんよう

1
Roman86