ReactJS文件加載器不工作

我無法讓文件加載器模塊工作。運行此代碼時，出現此錯誤：ReactJS文件加載器不工作

「您可能需要適當的加載程序來處理此文件類型。」

我一直在這個谷歌搜索了很多，但無法找到解決方案。有任何想法嗎？

webpack.config.js：

const path = require("path"); 
 
const webpack = require("webpack"); 
 

 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
 

 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
 
    template: "./client/index.html", 
 
    filename: "index.html", 
 
    inject: "body" 
 
}) 
 

 
module.exports = { 
 
    entry: "./client/index.js", 
 
    output: { 
 
     path: path.resolve("dist"), 
 
     filename: "index_bundle.js" 
 
    }, 
 
    module: { 
 
     loaders: [ 
 
      { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ }, 
 
      { 
 
       test: /\.(ico|png|gif|jpg|svg)$/i, 
 
       loader: "file-loader" 
 
      } 
 
     ] 
 
    }, 
 
    plugins: [ 
 
     HtmlWebpackPluginConfig 
 
    ] 
 
}

的package.json：

{ 
 
    "name": "hello-world-react", 
 
    "version": "1.0.0", 
 
    "main": "index.js", 
 
    "license": "MIT", 
 
    "scripts": { 
 
    "start": "webpack-dev-server --hot", 
 
    "build": "webpack -p" 
 
    }, 
 
    "dependencies": { 
 
    "html-webpack-plugin": "^2.28.0", 
 
    "path": "^0.12.7", 
 
    "react": "^15.5.4", 
 
    "react-dom": "^15.5.4", 
 
    "webpack": "^2.5.0", 
 
    "webpack-dev-server": "^2.4.5" 
 
    }, 
 
    "devDependencies": { 
 
    "babel-core": "^6.24.1", 
 
    "babel-loader": "^7.0.0", 
 
    "babel-preset-es2015": "^6.24.1", 
 
    "babel-preset-react": "^6.24.1", 
 
    "file-loader": "^0.11.1" 
 
    } 
 
}

App.jsx：

import React from "react"; 
 

 
export default class App extends React.Component { 
 
    render() { 
 
     return (
 
      <div style={{ textAlign: "center" }}> 
 
       <h1>Hello World</h1> 
 
       <img src={require("./client/dog1.jpg")}/> 
 
      </div> 
 
     ) 
 
    } 
 
}

來源

2017-05-06 bit010

你有.jsx源文件，但你告訴的WebPack只使用babel-loader在.js結尾的文件。修復你的Webpack配置測試：

{ test: /\.jsx?$/, loader: "babel-loader", exclude: /node_modules/ },

來源

2017-05-06 14:44:58

PS：第三次擊中谷歌'jsx webpack'：https：//www.twilio.com/blog/2015/08/setting-up-react-for- es6-with-webpack-and-babel-2.html –

我可以發誓我以前支持* .js和* .jsx！無論如何，非常感謝您的幫助！ :) – bit010

ReactJS文件加載器不工作

回答

相關問題