Node.js 我能';无法正确制作工作网页包
我收到了这个消息,请帮忙。。。提前谢谢Node.js 我能';无法正确制作工作网页包,node.js,webpack,Node.js,Webpack,我收到了这个消息,请帮忙。。。提前谢谢 Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { exp
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (`NormalModuleFactory`).
- configuration.resolve.extensions[0] should not be empty.
-> A non-empty string
我在网页中的配置是这样的,我仍在试图找出为什么会发生这种情况。。。我的文件是这样的:让我们独立查看这些消息:
configuration.module具有未知属性“loaders”。
表示您当前有:
{
module: {
loaders: {}
}
}
因此,将装载机
更改为规则
(根据):
configuration.resolve.extensions[0]不应为空。
表示您有:
{
resolve: {
extensions: ['']
}
}
因此,请从扩展名中删除空字符串:
{
resolve: {
extensions: []
}
}
从第7-14行和第37-46行,您注意到:
resolve: {
root: __dirname,
alias: {
Main: 'app/components/Main.jsx',
Nav: 'app/components/Nav.jsx'
},
extensions: ['', '.js', '.jsx']
},
及
这是不接受的网页,我建议你使用推荐的
resolve.extensions
排列
自动解析某些扩展。这默认为:
extensions: [".js", ".json"]
在这里:
root: __dirname,
alias: {
Main: 'app/components/Main.jsx',
Nav: 'app/components/Nav.jsx',
ListM: 'app/components/ListM.jsx',
About: 'app/components/About.jsx'
},
按照建议使用此格式
我希望这能有所帮助。我一直在努力寻找答案。。。我得做很多研究。但是,我找到了答案,或者我找到了解决这种情况的方法: 第一:创建一个文件.babel rc
/*
./.babelrc
*/
{
"presets":[
"es2015", "react"
]
}
也要考虑这个包JSON文件:
{
"name": "theatherflix",
"description": "",
"main": "server.js",
"scripts": {
"webpack": "webpack --progress",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "Nodeio Labs",
"license": "GPL-3",
"dependencies": {
"@babel/preset-react": "^7.0.0-beta.51",
"axios": "^0.18.0",
"babel": "^6.23.0",
"docker": "^1.0.0",
"express": "^4.13.4",
"extract-text-webpack-plugin": "^3.0.2",
"find-process": "^1.1.0",
"loader": "^2.1.1",
"material-ui": "^0.20.1",
"modules": "^0.4.0",
"path": "^0.12.7",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0",
"redux": "^4.0.0",
"redux-thunk": "^2.2.0",
"ts-loader": "^4.4.1",
"uuid": "^3.2.1",
"webpack-dev-server": "^3.1.4"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.51",
"@babel/preset-env": "^7.0.0-beta.51",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.5.0",
"fuse-box": "^3.2.2",
"gulp-babel": "^7.0.1",
"jsx-loader": "^0.13.2",
"node-sass": "^4.9.0",
"typescript": "^2.9.2",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.2"
}
}
*使用此模块包中您需要的内容
然后我更正了我的网页中的几行:
/*
./webpack.config.js
*/
const path = require('path');
module.exports = {
mode: "none",
entry: './app/app.jsx',
output: {
path: path.resolve('public'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.css$/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}, {
test: /\.jsx?$/,
exclude: /node_modules/,
use: "babel-loader"
}
]
}
}
这是我的app.jsx:
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, Main, About, MovieList, hashHistory} = require('react-router');
var Main = require('./components/Main.jsx');
var MovieList = require('./components/MovieList/MovieList.jsx');
var About = require('./components/About/About.jsx');
//import './app.scss';
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main}>
<Route path="about" component={About}/>
<IndexRoute component={MovieList}/>
</Route>
</Router>,
document.getElementById('app')
);
var React=require('React');
var ReactDOM=require('react-dom');
var{Route,Router,IndexRoute,Main,About,MovieList,hashHistory}=require('react-Router');
var Main=require('./components/Main.jsx');
var MovieList=require('./components/MovieList/MovieList.jsx');
var About=require('./components/About/About.jsx');
//导入“/app.scss”;
ReactDOM.render(
,
document.getElementById('app')
);
我希望它可能对其他人有所帮助。请提供您的网页配置。据错误显示,您的“模块”定义中有一个“loaders”键,但如果没有更多信息,很难进一步帮助您。请尝试更新网页包?我正在使用最新的。。。。仍然坚持这个mssg:/试着运行
npm安装--保存开发人员网页包
againI尝试了很多事情。。。。现在,我收到了这个消息。。。ash:d67645a8642f21f1a34e版本:webpack 4.10.2时间:272ms生成时间:2018年9月6日3:53:02 AM 1 asset Entrypoint app=bundle.js[0]。/app/app.jsx 278字节{0}[builded][failed][1错误]。/app app/app.jsx模块解析失败:意外标记(10:2)您可能需要适当的加载程序来处理此文件类型。|ReactDOM.render(| ||
{
"name": "theatherflix",
"description": "",
"main": "server.js",
"scripts": {
"webpack": "webpack --progress",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "Nodeio Labs",
"license": "GPL-3",
"dependencies": {
"@babel/preset-react": "^7.0.0-beta.51",
"axios": "^0.18.0",
"babel": "^6.23.0",
"docker": "^1.0.0",
"express": "^4.13.4",
"extract-text-webpack-plugin": "^3.0.2",
"find-process": "^1.1.0",
"loader": "^2.1.1",
"material-ui": "^0.20.1",
"modules": "^0.4.0",
"path": "^0.12.7",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0",
"redux": "^4.0.0",
"redux-thunk": "^2.2.0",
"ts-loader": "^4.4.1",
"uuid": "^3.2.1",
"webpack-dev-server": "^3.1.4"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.51",
"@babel/preset-env": "^7.0.0-beta.51",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.5.0",
"fuse-box": "^3.2.2",
"gulp-babel": "^7.0.1",
"jsx-loader": "^0.13.2",
"node-sass": "^4.9.0",
"typescript": "^2.9.2",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.2"
}
}
/*
./webpack.config.js
*/
const path = require('path');
module.exports = {
mode: "none",
entry: './app/app.jsx',
output: {
path: path.resolve('public'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.css$/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}, {
test: /\.jsx?$/,
exclude: /node_modules/,
use: "babel-loader"
}
]
}
}
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, Main, About, MovieList, hashHistory} = require('react-router');
var Main = require('./components/Main.jsx');
var MovieList = require('./components/MovieList/MovieList.jsx');
var About = require('./components/About/About.jsx');
//import './app.scss';
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main}>
<Route path="about" component={About}/>
<IndexRoute component={MovieList}/>
</Route>
</Router>,
document.getElementById('app')
);