Javascript 使用Webpack将json作为URI加载到React应用程序

我想为我的JSON文件创建一个URI，这样类似JSON的anives.JSON将作为类似localhost:8000/static/media/anives.JSON的URL导入，例如，与获取JSON文件的内容相反

为了实现这一点，我被告知在webpack.config.js文件中添加错误代码：

      {
        test: /\.json$/,
        loader: 'url-loader',
        options: {
          limit: false,
          publicPath: 'assets'
        },
        type:'javascript/auto'
      }

我已经将上述行添加到webpack.config.js。。。 我还确保安装url加载器客户端的反应应用程序。。。 但是，我在导入json文件的文件中仍然遇到以下错误：

Error in ./src/components/layout/Landing.js
Module not found: 'url-loader' in /Users/bliss/Documents/Coder/MERN/javascript_game_book/client/src/components/layout

 @ ./src/components/layout/Landing.js 34:15-61

我的Landing.js文件如下所示：

import React from 'react'
import PropTypes from 'prop-types'

import { Link } from 'react-router-dom'

import { connect } from 'react-redux';

import { assets } from '../../game_book/utilities';



import {
  makeCanvas, rectangle, circle, sprite,
  line, group, text, stage, render, remove,
  frame, frames
} from "../../game_book/display";


//import maze_text from '../../mazes/images/maze_text.png';

// import cat_png from './images/cat.png'

import cat_png from '../../game_book/images/cat.png';

import puzzler_otf from '../../game_book/fonts/puzzler.otf';


import animals_json from '../../game_book/images/animals.json';
// var animals_json = require('./animals.json')

import fairy_png from '../../game_book/images/fairy.png';
import tiger_png from '../../game_book/images/tiger.png';
import hedgehog_png from '../../game_book/images/hedgehog.png';
// import button_json from '../../game_book/images/button.json';

import up_png from '../../game_book/images/up.png';
import over_png from '../../game_book/images/over.png';
import down_png from '../../game_book/images/down.png';


console.log('assets', assets)

class Landing extends React.Component {

  componentDidMount() {
    if(this.props.auth.isAuthenticated){
      this.props.history.push('/dashboard');
    }

    // let canvas_01 = document.createElement("canvas");
    // canvas_01.setAttribute("width", "256");
    // canvas_01.setAttribute("height", "256");
    // canvas_01.style.border = "1px dashed black";
    // document.body.appendChild(canvas_01);
    // let ctx_01 = canvas_01.getContext("2d");
    //
    // assets.load([
    //   cat_png,
    //   // "./animals.json"
    // ]).then(() => setup_01());
    //
    // function setup_01() {
    //   console.log("All the images have been loaded");
    //   console.log(assets["../../game_book/images/cat.png"]);
    //
    //   console.log('assetsX', assets)
    //
    //   console.log('cat_png', cat_png)
    //
    //   //Displays: <img src="images/cat.png">
    //
    //   //Display the image of the cat on the canvas
    //   // ctx.drawImage(assets["../../game_book/images/cat.png"], 64, 64);
    //
    //
    //   ctx_01.drawImage(assets[cat_png], 64, 64);//this one works for react
    //
    // }


    //
    //
    // let canvas_02 = makeCanvas(256, 256);
    // canvas_02.style.border = "1px dashed black";
    // canvas_02.style.backgroundColor = "white";
    // document.body.appendChild(canvas_02);
    //
    // //Create the context as a property of the canvas
    // // let ctx2 = canvas2.getContext("2d");
    //
    //
    // let blueBox_02 = rectangle(64, 64, "blue", "none", 0, 32, 32);
    // blueBox_02.rotation = 0.2;
    //
    // let redBox_02 = rectangle(64, 64, "red", "black", 4, 160, 100);
    // redBox_02.alpha = 0.5;
    // redBox_02.scaleY = 2;
    //
    // let greenBox_02 = rectangle(64, 64, "yellowGreen", "black", 2, 50, 150);
    // greenBox_02.scaleX = 0.5;
    // greenBox_02.rotation = 0.8;
    //
    // //Render the sprites
    // render(canvas_02);
    //
    // //
    // let canvas3 = makeCanvas(312, 312);
    //
    // let stage = {
    //   //Set some default properties that the sprites will
    //   //need to reference
    //   x: 0,
    //   y: 0,
    //   gx: 0,
    //   gy: 0,
    //   alpha: 1,
    //   width: canvas3.width,
    //   height: canvas3.height,
    //   parent: undefined,
    //   //Give the stage `addChild` and `removeChild` methods
    //   children: [],
    //   addChild(sprite) {
    //     this.children.push(sprite);
    //     sprite.parent = this;
    //   },
    //   removeChild(sprite) {
    //     this.children.splice(this.children.indexOf(sprite), 1);
    //   }
    // };
    //
    // console.log('blueBox2 rectangle')
    // //Make the first parent sprite: the blueBox2
    // let blueBox2 = rectangle(96, 96, "blue", "none", 0, 64, 54);
    //
    // //Make the goldBox and add it as a child of the blueBox2
    // let goldBox = rectangle(64, 64, "gold");
    // blueBox2.addChild(goldBox);
    //
    // //Assign the goldBox's local coordinates (relative to the blueBox2)
    // goldBox.x = 24;
    // goldBox.y = 24;
    //
    // //Add a grayBox to the goldBox
    // let grayBox = rectangle(48, 48, "gray");
    // goldBox.addChild(grayBox);
    // grayBox.x = 8;
    // grayBox.y = 8;
    //
    // //add a pinkBox to the grayBox
    // let pinkBox = rectangle(24, 24, "pink");
    // grayBox.addChild(pinkBox);
    // pinkBox.x = 8;
    // pinkBox.y = 8;
    //
    // console.log('pinkBox', pinkBox)
    // //Display the `pinkBox's` gx and gy values
    // console.log('pinkBox.gx' ,pinkBox.gx);
    //
    // console.log('middle')
    // //Displays: 104
    // console.log( 'pinkBox.gy',pinkBox.gy);
    // //Display: 96
    //
    // console.log('after')
    //
    // //Rotate the `blueBox2`
    // blueBox2.rotation = 0.8;
    //
    // //Rotate the `grayBox`
    // grayBox.rotation = 0.3;
    //
    // //Scale the `blueBox2`
    // blueBox2.scaleX = 1.5;
    //
    // //Set the `blueBox2`'s alpha
    // blueBox2.alpha = 0.5
    //
    // //Set the `grayBox`'s alpha
    // grayBox.alhpa - 0.5;
    //
    // //blueBox2.alpha = 0.3;
    // //goldBox.alpha = 0.3;
    //
    // //blueBox2.rotation = 0.2;
    // //blueBox2.alpha = 0.3;
    // //blueBox2.visible = false;
    //
    // console.log('creating redBox2')
    // let redBox2 = rectangle(64, 64, "red", "black", 4, 220, 180);
    // let greenBox2 = rectangle(64, 64, "yellowGreen", "black", 4, 200, 200);
    // let violetBox = rectangle(64, 64, "violet", "black", 4, 180, 220);
    //
    //
    // redBox2.layer = 1;
    //
    // gameLoop();
    // function gameLoop() {
    //   console.log('gameLoop')
    //   requestAnimationFrame(gameLoop, canvas3);
    //
    //   render(canvas3);
    // }

    // //03_allTheSprites.html
    //
    //
    let canvas_03_allTheSprites = makeCanvas(512, 512);

    //Assign a height and width to the `stage` object
    stage.width = canvas_03_allTheSprites.width;
    stage.height = canvas_03_allTheSprites.height;

    console.log('03')
    console.log('animals_json', animals_json)

    debugger

    assets.load([
      puzzler_otf,
      cat_png,
      animals_json,
      fairy_png,
      tiger_png,
      hedgehog_png,
      // button_json
    ]).then(() => setup_03());

    var blueBox_03, pinkBox_03, message_03, goldBox_03, grayBox_03;

    function setup_03() {
      console.log('setup_03')

      blueBox_03 = rectangle(96, 96, "blue", "none", 0, 54, 64);
      blueBox_03.pivotX = 0.25;
      blueBox_03.pivotY = 0.25;

      //Make the goldBox and add it as a child of the blueBox_03
      goldBox_03 = rectangle(64, 64, "gold");
      blueBox_03.addChild(goldBox_03);

      //Assign the goldBox_03's local coordinates (relative to the blueBox_03)
      goldBox_03.x = 24;
      goldBox_03.y = 24;

      //Add a grayBox_03 to the goldBox_03
      grayBox_03 = rectangle(48, 48, "gray");
      goldBox_03.addChild(grayBox_03);
      //use `setPosition` to quickly qet the sprite's x and y values
      grayBox_03.setPosition(8, 8);

      //add a pinkBox to the grayBox
      pinkBox_03 = rectangle(24, 24, "pink");
      grayBox_03.addChild(pinkBox_03);
      pinkBox_03.x = 8;
      pinkBox_03.y = 8;
      pinkBox_03.pivotX = 0.75;
      pinkBox_03.pivotY = 0.75;

      //Remove the grayBox_03 from the pinkBox_03 and add the
      //pinkBox_03 back to the stage
      //grayBox_03.removeChild(pinkBox_03);
      //stage.addChild(pinkBox_03);

      //Display the `pinkBox_03's` gx and gy values
      console.log(pinkBox_03.gx);
      //Displays: 104
      console.log(pinkBox_03.gy);
      //Dsiplays: 96

      //Rotate the `blueBox_03`
      blueBox_03.rotation = 0.8;

      //Rotate the `grayBox_03`
      grayBox_03.rotation = 0.3;

      //Scale the `blueBox_03`
      blueBox_03.scaleX = 1.5;

      //Set the `blueBox_03`'s alpha
      blueBox_03.alpha = 0.5;

      //Set the `grayBox_03`'s alpha
      grayBox_03.alpha = 0.5;

      /*Depth layering*/

      let redBox_03 = rectangle(64, 64, "red", "black", 4, 220, 180);
      let greenBox_03 = rectangle(64, 64, "yellowGreen", "black", 4, 200, 200);
      let violetBox_03 = rectangle(64, 64, "violet", "black", 4, 280, 220);

      //Move the redBox_03 to a higher layer
      redBox_03.layer = 1;

      //Swap the depths of the redBox and greenBox
      stage.swapChildren(redBox_03, greenBox_03);

      /*Positioning */
      //Create a box around which to center things
      let limeBox_03 = rectangle(64, 64, "lime");
      limeBox_03.shadow = true;
      limeBox_03.setPosition(350, 80);

      //Create a box and position it above the limeBox
      let brownBox_03 = rectangle(32, 32, "brown");
      limeBox_03.putTop(brownBox_03, 0, -16);


      //Position a box to the right of the limeBox_03, offset
      //by 16 pixels on the x axis
      let navyBox_03 = rectangle(32, 32, "navy");
      limeBox_03.putRight(navyBox_03, 16);

      //Postion a box to the bottom of the limeBox_03 and
      //offset it by 16 pixels on the y axis
      let peruBox_03 = rectangle(32, 32, "peru");
      limeBox_03.putBottom(peruBox_03, 0, 16);

      //Position a box to the left of the limeBox and
      //offset it by -16 pixels on the x axis
      let wheatBox_03 = rectangle(32, 32, "wheat");
      limeBox_03.putLeft(wheatBox_03, -16, 0);

      //Center a box inside the limeBox_03
      let hotPinkBox_03 = rectangle(32, 32, "hotPink");
      limeBox_03.putCenter(hotPinkBox_03);

      //Test the `circular` property
      limeBox_03.circular = true;
      console.log(limeBox_03.diameter);
      limeBox_03.circular = false;
      console.log(limeBox_03.radius);

      /* Circles */

      let cyanCircle_03 = circle(64, "cyan", "red", 4, 64, 280);
      //cyanCircle_03.pivotX = 0.75;
      //cyanCircle_03.pivotY = 0.75;

      /* Lines */
      let blackLine_03 = line("black", 4, 200, 64, 264, 128);
      let redLine_03 = line("red", 4, 200, 128, 264, 64);
      let greenLine_03 = line("green", 4, 264, 96, 200, 96);
      let blueLine_03 = line("blue", 4, 232, 128, 232, 64);

      /* Text */
      message_03 = text("Hello World!", "24px Futura", "black", 330, 230);

      //Change the words that a text sprite displays using the `content`
      //property
      //message_03.content = "Anything you like";

      /* Groups */
      let boxGroup_03 = group(redBox_03, greenBox_03, violetBox_03);
      //boxGroup_03.removeChild(redBox_03);
      console.log(`group width: ${boxGroup_03.width} group height: ${boxGroup_03.height}`);

      //The width and height of text won't be set
      //until the text is rendered
      console.log(`width: ${message_03.width}`);

      //Displays: width: 0
      render(canvas_03_allTheSprites);
      console.log(`width: ${message_03.width}`);

      /* Images */
      //From an Image object
      let cat_03 = sprite(assets[cat_png], 64, 410);
      cat_03.width = 64;
      cat_03.height = 64;


      //From a texture atlas tileset frame
      let tiger_03 = sprite(assets[tiger_png], 192, 410);
      tiger_03.width = 64;
      tiger_03.height = 64;
      tiger_03.tiling = true;
      tiger_03.tileX = 20;
      tiger_03.tileY = 20;

      //From a tileset frame
      let fairyFrames_03 = frame(
        assets[fairy_png],
        0, 0, 48, 32
      );

      let fairy2_03 = sprite(fairyFrames_03, 224, 326);

      //From an array of image objects
      let animalImages_03 = [
        assets[hedgehog_png],
        assets[tiger_png],
        assets[cat_png]
      ];

      let hedgehog_03 = sprite(animalImages_03, 32, 410);
      hedgehog_03.width = 64;
      hedgehog_03.height = 64;

      //From an array of texture atlas frames

      let buttonFrames_03 = [
        assets[up_png],
        assets[over_png],
        assets[down_png]
      ]

      let button_03 = sprite(buttonFrames_03, 300, 280);

      //Use `gotoAndStop` to set the sprite's frame number
      fairy2_03.gotoAndStop(2);
      button_03.gotoAndStop(1);

      //Use the global `remove` method to remove any sprites from the
      //game.  They'll automatically be removed from the parents they
      //belong to.
      //remove(redBox_03, greenBox_03);

      //Displays: width: 141.84375
      gameLoop_03()


      function gameLoop_03() {
        requestAnimationFrame(gameLoop_03, canvas_03_allTheSprites);
        blueBox_03.rotation += 0.01;
        goldBox_03.rotation -= 0.02;
        pinkBox_03.rotation += 0.03;
        message_03.rotation += 0.01;
        render(canvas_03_allTheSprites);
      }
    }


  }//componentDidMount


  render () {
    return (

      <div className="landing">
        <div className="dark-overlay landing-inner text-light">
          <div className="container">
            <div className="row">
              <div className="col-md-12 text-center">
                <h1 className="display-3 mb-4">Developer Connector
                </h1>
                <p className="lead"> Create a developer profile/portfolio, share posts and get help from other developers</p>
                <hr />
                <Link to="/register" className="btn btn-lg btn-info mr-2">Sign Up</Link>
                <Link to="/login" className="btn btn-lg btn-light">Login</Link>
              </div>
            </div>
          </div>
        </div>
      </div>

    );

  }
}

Landing.propTypes = {
  auth: PropTypes.object.isRequired
}

const mapStateToProps = (state) => ({
  auth: state.auth
});

export default connect(mapStateToProps)(Landing);

从“React”导入React
从“道具类型”导入道具类型
从“react router dom”导入{Link}
从'react redux'导入{connect}；
从“../../game_book/utilities”导入{assets}”；
进口{
制作画布、矩形、圆形、精灵、，
行、组、文本、舞台、渲染、移除、，
框架，框架
}来自“../../game_book/display”；
//从“../../mazes/images/maze_text.png”导入maze_文本；
//从“./images/cat.png”导入cat_png
从“../../game_book/images/cat.png”导入cat_png；
从“../../game_book/fonts/puzzler.otf”导入拼图工具；
从“../../game_book/images/anists.json”导入动物_json；
//var anists_json=require（'./anists.json'）
从“../../game_book/images/fairy.png”导入fairy_png；
从“../../game_book/images/tiger.png”导入tiger_png；
从“../../game_book/images/hedgehog.png”导入hedgehog_png；
//从“../../game_book/images/button.json”导入按钮_json；
从“../../game_book/images/up.png”导入up_png；
从“../../game_book/images/over.png”导入over_png；
从“../../game_book/images/down.png”导入down_png；
console.log（'assets'，assets）
类扩展React.Component{
componentDidMount（）{
if（this.props.auth.isAuthenticated）{
this.props.history.push（'/dashboard'）；
}
//让canvas_01=document.createElement（“canvas”）；
//canvas_01.setAttribute（“宽度”、“256”）；
//canvas_01.setAttribute（“高度”、“256”）；
//canvas_01.style.border=“1px黑色虚线”；
//文件.正文.附件（canvas_01）；
//设ctx_01=canvas_01.getContext（“2d”）；
//
//资产加载([
//巴布亚新几内亚猫，
///“/anives.json”
//）。然后（（）=>setup_01（））；
//
//函数设置_01（）{
//log（“所有图像都已加载”）；
//log（assets[“../../game_book/images/cat.png]”）；
//
//console.log（'assetsX'，assets）
//
//console.log（'cat\u png'，cat\u png）
//
////显示：
//
////在画布上显示猫的图像
////ctx.drawImage（资产[”../../game_book/images/cat.png“]，64,64）；
//
//
//ctx_01.drawImage（assets[cat_png]，64,64）；//这一个适用于react
//
// }
//
//
//让canvas_02=makeCanvas（256，256）；
//canvas_02.style.border=“1px黑色虚线”；
//canvas_02.style.backgroundColor=“白色”；
//文件.正文.附件（canvas_02）；
//
////将上下文创建为画布的属性
////让ctx2=canvas2.getContext（“2d”）；
//
//
//让blueBox_02=矩形（64,64，“蓝色”，“无”，0,32,32）；
//蓝盒旋转度=0.2；
//
//设redBox_02=矩形（64,64，“红色”，“黑色”，4160100）；
//红盒_02.alpha=0.5；
//redBox_02.scaleY=2；
//
//设greenBox_02=矩形（64,64，“黄绿色”、“黑色”，2,50,150）；
//greenBox_02.scaleX=0.5；
//绿盒旋转=0.8；
//
////渲染精灵
//渲染（画布_02）；
//
// //
//让canvas3=makeCanvas（312312）；
//
//让阶段={
////设置精灵将显示的一些默认属性
////需要参考
//x:0,，
//y:0，
//gx:0，
//gy:0，
//阿尔法：1，
//宽度：画布宽度3，
//高度：画布高度，
//父项：未定义，
////给出stage'addChild'和'removeChild'方法
//儿童：[]，
//addChild（精灵）{
//这个。孩子。推（雪碧）；
//sprite.parent=这个；
//   },
//removeChild（精灵）{
//this.children.splice（this.children.indexOf（sprite），1）；
//   }
// };
//
//log（'blueBox2矩形'）
////制作第一个父精灵：蓝盒子2
//设blueBox2=矩形（96,96，“蓝色”，“无”，0,64,54）；
//
////制作goldBox并将其添加为blueBox2的子项
//设goldBox=矩形（64，64，“黄金”）；
//blueBox2.addChild（goldBox）；
//
////分配goldBox的局部坐标（相对于blueBox2）
//goldBox.x=24；
//goldBox.y=24；
//
////将灰色框添加到goldBox
//设灰盒=矩形（48，48，“灰色”）；
//goldBox.addChild（灰盒）；
//灰盒x=8；
//灰盒y=8；
//
////向灰盒中添加一个pinkBox
//设pinkBox=矩形（24,24，“粉色”）；
//grayBox.addChild（pinkBox）；
//pinkBox.x=8；
//pinkBox.y=8；
//
//console.log（'pinkBox'，pinkBox）
////显示'pinkBox'的'gx和gy值
//log（'pinkBox.gx'，pinkBox.gx）；
//
//console.log（'middle'）
////显示：104
//日志（'pinkBox.gy'，pinkBox.gy）；
////显示：96
//
//console.log（'after'）
//
////旋转“blueBox2”`
//blueBox2.旋转=0.8；
//
////旋转“灰盒”`
//grayBox.rotation=0.3；
//
////缩放“blueBox2”`
//blueBox2.scaleX=1.5；
//
////设置'blueBox2'的alpha值
//blueBox2.alpha=0.5
//
////设置'grayBox'的alpha值
//grayBox.alhpa-0.5；
//
////blueBox2.alpha=0.3；
////goldBox.alpha=0.3；
//
////blueBox2.rotation=0.2；
////blueBox2.alpha=0.3；
////blueBox2.visible=false；
//
//console.log（'creating redBox2'）
//设redBox2=矩形（64,64，“红色”、“黑色