导入React组件时Webpack模块构建失败

Question

我正在做一个将React和ASP.Net集成在一起的项目。 我已经完成了最初的Hello World并且每个工作都按预期进行（不难：p）。 我正在将webpack与babel-loader一起使用来生成我的`bundle.js。

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

ReactDOM.render(<h1>LPMU</h1>, document.getElementById('root'))

这是我的webpack.config.js文件：

module.exports = {
    context: __dirname,
    entry: "./App.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env', 'babel-preset-react']
                    }
                }
            }
        ]
    }
}

解决之后，我尝试将我的App.js组件和所有其他组件添加到我的ASP.NET项目脚本内的react文件夹中。 由于正在使用ReactDOM.render()我没有执行export default App 。 我像往常一样将组件导入到App.js中：

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import './App.css';
import Header from './Header';
import Footer from './Footer';
import Landing from './Landing';
import * as lpmuGlobal from './lpmu-global';

然后，我只渲染App组件：

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

现在，当我再次运行npm run webpack时，遇到两个问题，如下所示：

  size   name  module    status
  704 B  0     ./App.js  built failed ✖

  Δt 596ms (1 asset hidden)


./App.js
  0:0  error  Module build failed (from ./node_modules/babel-loader/lib/index.js):

configuration
  0:0  warning  The 'mode' option has not been set, webpack will fallback to
                'production' for this value. Set 'mode' option to 'development' or
                'production' to enable defaults for each environment.

✖ 2 problems (1 error, 1 warning)

我一直在寻找解决方案，但是由于我真的是webpack的新手，所以我不知道会发生什么，如果我需要在webpack.config.js其他webpack.config.js ，或者必须将其组件导入其他任何内容方式或其他方式。

这也是我的json.package ：

{
  "name": "lpmu-react-app",
  "version": "1.0.0",
  "description": "Integración de ReactJS con ASP.NET",
  "main": "App.js",
  "scripts": {
    "start": "react-scripts start",
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "DPS",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "webpack-command": "^0.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.4"
  }
}

谢谢

Answer 1

该错误是因为尚未将.babelrc文件或babel选项添加到package.json文件中以提供babel选项。

为了启用预设，您必须在.babelrc文件中对其进行定义

将babel选项添加到package.json中，如下所示：

的package.json：

 {
  "name": "lpmu-react-app",
  "version": "1.0.0",
  "description": "Integración de ReactJS con ASP.NET",
  "main": "App.js",
  "scripts": {
    "start": "react-scripts start",
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel":{
   "presets": ["env","react"]
  }
  "author": "DPS",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "webpack-command": "^0.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.4"
  }
}

通过以下链接进行进一步说明：

https://babeljs.io/docs/en/babelrc.html

https://babeljs.io/en/setup/#installation

关于警告：

Webpack 4需要您在配置中包括mode选项，因为您通常希望将开发和生产配置分开。

浏览下面的链接，其中详细说明了如何设置配置。 https://www.valentinog.com/blog/webpack-4-tutorial/

module.exports = {
    context: __dirname,
    entry: "./App.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env', 'babel-preset-react']
                    }
                }
            }
        ]
    }
}

希望有帮助:)