如何解决在REACT上安装Webpack时出错:无效的配置对象 Webpack已使用以下配置对象进行了初始化:
无效的配置对象。已使用与API模式不匹配的配置对象初始化了Webpack。
-
configuration.module具有未知的属性'loaders'。这些属性有效: 对象{defaultRules?,exprContextCritical?,exprContextRecursive?,exprContextRegExp?,exprContextRequest?,noparse ?、规则?,strictExportPresence?,strictThisContextOnImports?,unkNownContextCritical?,unkNownContextRecursive?,unkNownContextRegExp?,unkNownContextRequest?,unsafeCache?,wrappedContextReritive? wrapperContextRegExp? } ->影响普通模块(
normalModuleFactory
)的选项。 -
configuration.output.path:提供的值“ dist / assets”不是绝对路径! ->输出目录为绝对路径(必需)。
在React教程课程中(“使用webpack构建”) (我使用Windows,但当然是在Linux上
var webpack = require("webpack");
module.exports = {
entry: "./src/index.js",output: {
path: "dist/assets",filename: "bundle.js",publicPath: "assets"
},devServer: {
inline: true,contentBase: './dist',port: 3000
},module: {
loaders: [
{
test: /\.js$/,exclude: /(node_modules)/,loader: ["babel-loader"],query: {
presets: ["latest","react","stage-0"]
}
}
]
}
}
const { createElement } = React
const { render } = ReactDOM
const style = {
backgroundColor: 'orange',color:'white',fontFamily: 'verdana'
}
const title = createElement(
'h1',{id:'title',className:'header',style: style},'hello world'
)
render(
<h1 id='title'
className='header'
style={{backgroundColor:'orange'}}>
hello world
</h1>,document.getElementById('react-container')
)
my cmd with command "webpack" to convert index.js to bundle.js
tutorial's terminal that run webpack successfully!!
解决方法
这里有几个问题:
-
您正在使用无效的密钥
loaders
。它应该是rules
。 从Webpack v2开始更改。有关更多信息,请参见此页面:
https://webpack.js.org/migrate/3/#module-loaders-is-now-module-rules -
query
已弃用,而赞成options
:
https://webpack.js.org/configuration/module/#ruleoptions--rulequery -
loader
键的值不应为数组。
module: {
rules: [
{
test: /\.js$/,exclude: /(node_modules)/,loader: "babel-loader",options: {
presets: ["latest","react","stage-0"]
}
}
]
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。