Javascript 网页包-您可能需要一个合适的加载程序
每次我回来使用JavaScript时,我都会与网页包和Transpiler打交道。我需要帮助,我被困住了。即使指定了Web包,也找不到合适的加载程序 webpack.config.jsJavascript 网页包-您可能需要一个合适的加载程序,javascript,reactjs,webpack,babel-loader,Javascript,Reactjs,Webpack,Babel Loader,每次我回来使用JavaScript时,我都会与网页包和Transpiler打交道。我需要帮助,我被困住了。即使指定了Web包,也找不到合适的加载程序 webpack.config.js const path = require( "path" ); module.exports = { entry: "./app.js", output: { filename: "starmap.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
{
"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
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"))
当我运行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"))
./app.js 15:8中的错误
模块分析失败:意外令牌(15:8)
您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理此文件。看见https://webpack.js.org/concepts#loaders
| }
|
>render(,document.getElementById(“\u customizer”))
但是成功地运行了
npx babel app.js
transbiles。我的网页配置有问题,我已经仔细观察了,一切似乎都正常。你的js似乎没有被babel loader处理。我相信问题在于你的测试正则表达式
改变
test: /\\.js$/,
到
就是这样!该死,我一直在看这个。谢谢大家!@如果这已经回答了您的问题,请将其标记为答案,以便其他人更容易找到正确答案。
test: /\\.js$/,
test: /\.js$/,