React 和 ReactDOM 未使用 webpack、babel 加载答案

【问题标题】：React and ReactDOM not loading using webpack, babelReact 和 ReactDOM 未使用 webpack、babel 加载
【发布时间】：2018-10-02 01:48:44
【问题描述】：

我正在使用 webpack 和 babel 设置一个 React 项目，但是我收到 React 和 ReactDOM 无法解析的错误。

问题出在 Webpack 还是 Babel 的版本上？

PS C:\Users\abhi\Desktop\mern-app> npm run webpack

> mern-app@1.0.0 webpack C:\Users\abhi\Desktop\mern-app
> webpack

ERROR in ./app.js
Module not found: Error: Can't resolve 'react' in 'C:\Users\abhi\Desktop\mern-app'
 @ ./app.js 5:13-29

ERROR in ./app.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\Users\abhi\Desktop\mern-app'
 @ ./app.js 9:16-36
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mern-app@1.0.0 webpack: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mern-app@1.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\abhi\AppData\Roaming\npm-cache\_logs\2018-04-21T14_25_50_508Z-debug.log

配置和文件如下

package.json

{
  "name": "mern-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  "author": "Abhishek Kulshrestha",
  "license": "ISC",
  "dependencies": {
    "npm": "^5.8.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}

webpack.config.js

var path = require('path');

var webpack = require('webpack');

module.exports ={
    entry:'./app.js',
    output:{
        filename:'bundle.js',
        path:__dirname
    },
    resolve:{
        extensions:['.js']
    },
    module:{
        rules:[{
            test:/.jsx?$/,
            use:{
                loader:'babel-loader',
                options:{
                    presets: ['env',
                                'react']
                 }
            },
            exclude:/.node_modules/

        }]
    }

}

app.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    render(){
        return '<h1>Hello </h1>'
    }
}

ReactDOM.render(<App/>,document.getElementById('app'));

所有文件（package.json、webpack.config.js、app.js、index.html）都在同一个主文件夹中

请帮忙

【问题讨论】：

您是否使用“create-react-app”进行设置？（如果没有，我会尝试。）
@zanerock，没有。我想从头开始构建它。
良好的学习经历。我自己不知道如何配置 webpack 等，但是您可以使用“create-react-app”创建另一个项目，然后比较配置。
你的 webpack.config 中有一个错字。 exclude:/.node_modules/ 应该是 exclude: /node_modules/（没有句号）。这可能会有所帮助。

标签： javascript reactjs webpack

【解决方案1】：

这段代码对我来说很好。我认为您在运行 webpack 命令之前错过了依赖项安装步骤。

请按顺序尝试按照以下步骤操作，看看是否可以解决错误。

在目录中运行npm install，这将确保你在package.json中提到的所有依赖项都下载到node_modules目录。
然后运行npm run webpack生成bundle.js

【讨论】：