웹 팩에 정적 JSON 파일 로드

웹 팩에 정적 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

질문:.

웹 팩 복사 방법src/content/json/menu.json로.dist/content/json/menu.json?

사용하고 있다fetchJSON 파일을 요청하며 실행 시에만 발생합니다.또한 웹 팩은 가져온 모든 항목만 처리합니다.함수에 대한 인수를 처리할 것으로 예상했지만 웹 팩이 처리할 경우 함수에 대한 모든 인수는 모듈로 간주되어 해당 함수에 대한 다른 모든 용도가 중단됩니다.

로더를 기동하려면 , 파일을 Import 할 수 있습니다.

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

또한 런타임에 가져오는 대신 JSON을 가져와 직접 사용할 수도 있습니다.Webpack 2는 기본적으로 모든 사용자에게 사용됩니다..json파일을 삭제해야 합니다..json규칙을 지정하면 다음과 같이 JSON을 Import합니다.

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

menu에서 얻을 수 있는 것과 동일한 JavaScript 객체입니다.getMenu기능.

json을 실행 시/실행 시 로딩하고 싶다면 멋진 웹 팩의 동적 Import 기능을 사용할 수 있습니다.

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

Promise가 반환되고 Promise가 모듈 객체로 해결되며 데이터가 포함된 "default" 필드가 표시됩니다.따라서 다음과 같은 것이 필요할 수 있습니다(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

좋은 하루 되세요.

언급URL : https://stackoverflow.com/questions/43735486/load-static-json-file-in-webpack