Question

我刚开始学习ReactJS并遇到了一个名为webpack的东西，它基本上是一个模块捆绑器。

不知何故，我坚持使用相同的配置，以下错误不断出现。

./src/index.js中的错误7:16

模块解析失败：意外令牌（7:16）

您可能需要适当的加载程序来处理此文件类型。

render()
{
    return (<div> <h1> Hi </h1> </div>);
}

npm ERR！代码ELIFECYCLE

npm ERR！ errno 2

npm ERR！ reactsetup@1.0.0开始：webpack --mode=development ./src/index.js -o bundle.js

npm ERR！退出状态2

npm ERR！

npm ERR！在reactsetup@1.0.0启动脚本时失败。

这是我的 Package.json

    {
  "name": "reactsetup",
  "version": "1.0.0",
  "main": "./src/index.js",
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "bundle-loader": "^0.5.6",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.12.0",
    "webpack-dev-server": "^3.1.4"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode=development ./src/index.js -o bundle.js",
    "build": "webpack -d && cp index.html dist/index.html &&  webpack-dev-server --content-base src/ --inline --hot",
    "dev-start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

index.js

import React from "react"
import {render} from "react-dom"      

class App extends React.Component {
    render()
    {
        return (<div> <h1> Hi </h1> </div>);

    }

}

render(<App/>, window.document.getElementById("app"));

web.config.js

var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
    entry: SRC_DIR + "index.js",
    output: {
        path: DIST_DIR,
        filename: "bundle.js"
    },
    module: {
        rules: [ {
            test: /\.js?/,

            use: {
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ["react", "es2015"]
                }
            }
        }
        ]
    }
};

    module.exports = config

最后， index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<script src="bundle.js"></script>
</body>
</html>

PS：这是我在stackoverflow上的第一个问题。如果有的话，为这些缺陷道歉。

Answer 1

似乎有几件事

将web.config.js重命名为webpack.config.js
安装babel-preset-react
将您的HTML更改为以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>

webpack.config.js

var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
  entry: SRC_DIR + '/index.js',
  output: {
    path: DIST_DIR,
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js?/,
        exclude: /node_modules/,

        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react', 'es2015'],
          },
        },
      },
    ],
  },
};

module.exports = config;

一个提示，使用create react app快速启动反应：）

Answer 2

config的默认名称是＆＃34; webpack.config.js＆＃34;，而不是＆＃34; web.config.js＆＃34;。你没有通过＆＃34; - config＆＃34;财产也。所以看起来你的webpack配置根本就没用过。

我相信，将配置重命名为＆＃34; webpack.config.js＆＃34;可以帮到你

Answer 3

初学者设置React环境的最简单方法是使用create-react-app。

我假设你已经安装了节点。如果没有，快速谷歌搜索将指导您如何安装nodejs。

之后，在要创建项目的目录中运行以下命令

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

然后打开浏览器并转到localhost:3000，您应该会看到您的反应模板。

有关create-react-app的更多信息，请访问以下链接

github page

react official documentation

ReactJS的Webpack / Babel安装

3 个答案: