我正在使用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"
}
}
您正在使用不必要的转义字符:这不是必需的。
替换
test: '/\.(js|jsx)$/',
与test: /\.js$|jsx/,
它应该可以正常工作。
我在我的机器中复制了您的问题,并发现了相同的问题,并通过上述修复解决了问题。
希望这有帮助,编码愉快!
所选答案缺少一些细节:
应该是
test: /\.js|\.jsx$/
\: is an escape character
在本例中为 .
|: is an Alternation / OR operand
$: is end of line
希望这对您有用。
就我而言,我配置了这个并且它有效:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react", "@babel/preset-env"],
},
},
},
这个错误发生在我身上只是因为该文件被放置在项目的父文件夹中(即项目文件夹之外)。
将文件移动到适当的文件夹即可修复该问题。
如果您在处理文件时遇到此错误,在担心修改 webpack 配置之前,请检查导致错误的文件是否具有 扩展名,即 .js 或 .jsx。当我忘记在我的 Javascript 文件之一上添加扩展名时,我遇到了此错误。即我有 my-file 而不是 my-file.js
我知道这不是对原始问题的直接答案,但这是人们在使用装载机遇到麻烦时最有可能遇到的地方之一。
就我而言,它所抱怨的文件位于 node_modules 文件夹内。我直接使用打字稿文件。
{
test: /\.m?ts$|\.tsx?$/,
// exclude: /node_modules/,
use: {
loader: "ts-loader",
options: {
onlyCompileBundledFiles: true,
}
},
},
我所做的更改是删除排除部分并将
onlyCompileBundledFiles
添加到 ts-loader
。其他装载机可能也有类似的东西。但基本上它只会处理包中包含的项目,无论它们是在 node_modules 文件夹内部还是外部。
将下面提到的代码放入webpack文件中
mix.extend(
"graphql",
new (class {
dependencies() {
return ["graphql", "graphql-tag"];
}
webpackRules() {
return {
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: "graphql-tag/loader"
};
}
})()
);
mix.js("resources/js/app.js", "public/js").vue();
mix.graphql();
只需从测试属性中删除单引号即可。
test: /\.(js|jsx)$/
将 .babelrc 文件添加到 node_modules 文件夹所在的同一文件夹中,其中包含以下内容
{
"presets": ["@babel/preset-react"]
}