webpack.config.js 中的 json-loader 不起作用 [英] json-loader in webpack.config.js not working

问题描述

我正在尝试按照反应教程进行操作，我的 webpack.config.js 文件如下:

var webpack = require("webpack");var pth = require("路径");模块.出口 = {条目:./src/index.js"，输出: {路径:__dirname + "/dist",文件名:bundle.js"},开发服务器:{内联:真实，contentBase: './dist',端口:3000},模块: {规则: [{ 测试:/\.js$/, 排除:/(node_modules)/, 使用: 'babel-loader' },{ 测试:/\.json$/，排除:/(node_modules)/，使用:'json-loader' }]}}

虽然我的代码文件如下:我在 lib.js 中制作了组件，并且在 index.js 中完成渲染，最终在 index.html 中的 HTML div 中调用

lib.js

从 'react' 导入 React从 './titles.json' 导入文本导出常量你好 = (<h1 id='标题'类名='标题'style={{backgroundColor: 'purple', color: 'yellow'}}>{text.hello})出口常量再见=(<h1 id='标题'类名='标题'style={{backgroundColor: 'white', color: 'red'}}>{文字.再见})

index.js

从 'react' 导入 React从 'react-dom' 导入 {render}从'./lib'导入{你好，再见}常量设计 = {背景颜色:'红色'，白颜色'，fontFamily:'verdana'}使成为(<div>{你好}{再见}

,document.getElementById('反应容器'))

当我运行 webpack -w 命令时，我遇到以下错误

 ./src/titles.json 中的错误模块解析失败:JSON 中位置 0 的意外标记 m您可能需要一个合适的加载器来处理这种文件类型.语法错误:JSON 中位置 0 的意外标记 m在 Object.parse(本机)在 FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:447:3)@ ./src/lib.js 12:14-38@ ./src/index.js块主要 [entry] 中的错误包.js无法读取未定义的属性替换"

我的JSON文件如下:标题.json

<代码>{"你好": "你好！",再见":Au Revoir"}

我的模块版本如下:网络包 4.1.1json-loader 0.5.7

我已经使用 npm install 全局安装了 webpack 和 json-loaderTIA

解决方案

我注意到你正在使用 webpack 4.根据 json-loader 自述文件:

<块引用>

从 webpack >= v2.0.0 开始，JSON 文件的导入将默认工作

因此，如果您同时使用 webpack >= v2.0.0 和 json-loader，文件将被转换两次，从而导致问题.解决办法就是删除json-loader规则.

I'm trying to follow a react tutorial, My webpack.config.js file is as follows:

var webpack = require("webpack");
var pth = require("path");

module.exports = {
entry: "./src/index.js",
output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
},
devServer: {
    inline: true,
    contentBase: './dist',
    port: 3000
},
module: {
    rules: [
      { test: /\.js$/, exclude: /(node_modules)/, use: 'babel-loader' },
      { test: /\.json$/, exclude: /(node_modules)/, use: 'json-loader' }
    ]
  }
} 

While my Code files are as follows: I have made components here in lib.js and rendering is being done in index.js which ultimately is called in a HTML div in index.html

lib.js

import React from 'react'
import text from './titles.json'

export const hello = (
<h1 id='title'
    className='header'
    style={{backgroundColor: 'purple', color: 'yellow'}}>
    {text.hello}    
</h1>
)


export const goodbye = (
<h1 id='title'
    className='header'
    style={{backgroundColor: 'white', color: 'red'}}>
    {text.goodbye}    
</h1>
)

index.js

import React from 'react'
import {render} from 'react-dom'
import {hello, goodbye} from './lib'


const design = {
backgroundColor: 'red',
color: 'white',
fontFamily:'verdana'
}


render(
<div>
    {hello}
    {goodbye}
</div>,    
document.getElementById('react-container')
)

When I run webpack -w command, I experience the following error

ERROR in ./src/titles.json
Module parse failed: Unexpected token m in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token m in JSON at position 0
at Object.parse (native)
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:447:3)
@ ./src/lib.js 12:14-38
@ ./src/index.js

ERROR in chunk main [entry]
bundle.js
Cannot read property 'replace' of undefined

My JSON file is as follows: titles.json

{
    "hello": "Bonjour!",
    "goodbye": "Au Revoir"

}

My Module verions are as follows: webpack 4.1.1 json-loader 0.5.7

I have installed webpack and json-loader globally using npm install TIA

解决方案

I notice you are using webpack 4. According to json-loader README:

Since webpack >= v2.0.0, importing of JSON files will work by default

So if you are using webpack >= v2.0.0 and json-loader together, the file will be transformed twice which caused the issue. The solution is simply delete the json-loader rule.

这篇关于webpack.config.js 中的 json-loader 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！