我正在尝试实现[email protected]和babel-loader @ 8来处理反应脚本。我在捆绑jsx语法时遇到了麻烦(遇到任何html标记时,webpack babel-loader退出并出现错误。
我使用命令:npm run build
(webpack --mode生产)
index.js
// Import the wrapper component, and the the creator function
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React project</p>;
}
}
render(<App/>, document.getElementById('app'));
通常的错误信息:
[0] ./src/index.js 339 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.js 9:11
Module parse failed: Unexpected token (9:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| class App extends React.Component {
| render () {
> return <p> Hello React project</p>;
| }
| }
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --mode production`
npm ERR! Exit status 2
[捆绑在尝试执行时也总是失败:render(<App/>, document.getElementById('app'));
从另一个文件导入App组件或定义了呈现html标签的App函数之后。
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
}
};
package.json
"name": "webpack_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.8.6",
"@babel/preset-env": "^7.8.6",
"@babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-router-dom": "^5.1.2"
}
}
我尝试将index.js文件与@babel/cli
捆绑在一起,这似乎可以正常工作(命令npx babel --presets @babel/preset-env,@babel/preset-react
)。我已经尝试解决这个问题太长时间了,非常感谢您提供一些指示信息:)感谢您的帮助,
UPDATEwebpack.config.js
的末尾有空格,因此webpack无法识别。
您可以检查我的配置
我的网页包
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader", "eslint-loader"]
},
。babelrc文件
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime"
]
}
package.json
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
更新:
请确保在devDependencies部分中将"eslint": "^6.8.0"
安装到package.json中>