[英]Webpack - You may need an appropriate loader
Each time I come back to work with JavaScript, I struggle with webpack and transpilers.每次我回来使用 JavaScript 时,我都会为 webpack 和转译器而苦恼。 I need help here, I am stuck.
我在这里需要帮助,我被困住了。 Webpack is not finding appropriate loader even when specified.
即使指定了 Webpack 也没有找到合适的加载器。
webpack.config.js webpack.config.js
const path = require( "path" );
module.exports = {
entry: "./app.js",
output: {
filename: "starmap.js",
path: path.resolve(__dirname, "../asset/js/" )
},
mode : "development",
module : {
rules : [
{
test: /\\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: [ "@babel/preset-env", "@babel/preset-react" ]
}
}
]
}
}
package.json包.json
{
"name": "editor",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"@webpack-cli/init": "^1.0.2",
"babel-loader": "^8.1.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"css-loader": "^5.0.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.0",
"webpack": "^5.1.3",
"webpack-cli": "^4.1.0"
}
}
app.js应用程序.js
import React from "react"
import { render } from "react-dom"
class Starmap extends React.Component {
constructor() {
super()
this.state = []
}
render() {
return "Hello world"
}
}
render( <Starmap />, document.getElementById("customizer"))
.babelrc .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
When I run webpack
, I get this error:当我运行
webpack
,出现此错误:
ERROR in ./app.js 15:8
Module parse failed: Unexpected token (15:8)
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
| }
|
> render( <Starmap />, document.getElementById("_customizer"))
But running npx babel app.js
transpiles successfully.但是运行 npx
npx babel app.js
可以成功转换。 Is something wrong with my webpack config, I have watched carefully, everything seems okay.是不是我的 webpack 配置有问题,我仔细看了看,一切正常。
It seems that your js is not being handled by the babel-loader.似乎你的 js 没有被 babel-loader 处理。 I believe the issue is in your test regex
我相信问题出在您的测试正则表达式中
change改变
test: /\\.js$/,
to到
test: /\.js$/,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.