我正在使用yarn设置react项目的webpack,出现以下错误:
./src/app.js 67中的错误:6模块解析失败:意外标记(67:6)您可能需要适当的加载程序来处理此文件类型,当前未配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders "wdm“:无法编译。
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module:{
rules:[{
loader: 'babel-loader',
test: '/\.(js|jsx)$/',
exclude: /node_modules/
}]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
}
}
.babelrc
{
"presets": ["env", "react","@babel/preset-env"],
"plugins": [
"transform-class-properties"
]
}
package.json
{
"name": "react",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build": "webpack",
"dev-server": "webpack-dev-server"
},
"dependencies": {
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"live-server": "^1.2.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"webpack": "^4.39.3",
"webpack-dev-server": "^3.8.0"
},
"devDependencies": {
"@babel/core": "^7.6.0",
"babel-loader": "^8.0.6",
"webpack-cli": "^3.3.8"
}
}
6条答案
按热度按时间sqyvllje1#
您使用了不必要的转义符:这不是必需的。
将
test: '/\.(js|jsx)$/',
替换为test: /\.js$|jsx/,
,应能正常工作。我在我的机器中复制了您的问题,并发现了相同的问题,这是由上述修复程序解决的。
希望这能有所帮助,快乐编码!!!
oxiaedzo2#
所选答案缺少一些详细信息:
应该是
test: /\.js|\.jsx$/
\: is an escape character
在本例中为.
|: is an Alternation / OR operand
$: is end of line
希望这对你有用。
来源:https://www.rexegg.com/regex-quickstart.html
xzlaal3s3#
这个错误发生在我身上,只是因为文件被放置在项目的父文件夹中(即项目文件夹之外)。
将文件移动到适当的文件夹中可修复此问题。
ztmd8pv54#
在我的例子中,我配置了这个,它工作了:
wtzytmuj5#
将下面提到的代码放入webpack文件中
wydwbb8l6#
添加一个.babelrc文件到node_modules文件夹所在的同一文件夹,包含以下内容