[npm run build issue
与stackoverflow相关的问题与不同的问题有关。
我尝试编译node.js项目。
我还有webpack.config.js,app.js和package.json。
一个错误说:
./ src / components / app.js 11:12中的错误模块解析失败:意外令牌(11:12)您可能需要适当的加载程序来处理此文件类型,当前没有配置任何加载程序来处理此文件。参见
| render() {
| return (
> <div className="container">
| <input className="btn btn-primary" type="submit" value="Alert" onClick={() => {alert("Alert button onClick");}}/>
| </div>
@ ./src/index.js 1:0-26
我的app.js:
import ReactDOM from "react-dom";
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div className="container">
<input className="btn btn-primary" type="submit" value="Alert" onClick={() => {alert("Alert button onClick");}}/>
</div>
)
}
}
const app = document.getElementById('app');
if(app){
ReactDOM.render(<App/>, app);
}
我的webpack.config.js
module.exports = {
entry: [
'./src/index.js'
],
output: {
filename: 'build.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
我的package.json
{
"name": "mweb3-demo-waves",
"version": "0.1.0",
"scripts": {
"webpack" : "webpack",
"dev": "npm run webpack -- --mode development --watch",
"build": "npm run webpack -- --mode production",
"watch": "webpack --watch"
},
"dependencies": {
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"express": "^4.16.4"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/runtime-corejs2": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.2.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0"
}
}
回答如下:在webpack.config.js
中尝试此操作:module.exports = {
entry: [
'./src/index.js'
],
output: {
filename: 'build.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};