在 REACT 上安装 webpack 时出错：配置对象无效。 Webpack 已使用配置对象初始化

Posted 2023-02-22

【中文标题】在 REACT 上安装 webpack 时出错：配置对象无效。 Webpack 已使用配置对象初始化

【英文标题】：Error in installing webpack on REACT: Invalid configuration object. Webpack has been initialised using a configuration object that

【发布时间】：2021-01-10 01:46:08

【问题描述】：

配置对象无效。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。

configuration.module 有一个未知属性“loaders”。这些属性是有效的： object defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, WrappedContextCritical?, WrappedContextRecursive?, WrappedContextRegExp? -> 影响正常模块的选项 (NormalModuleFactory)。

configuration.output.path：提供的值“dist/assets”不是绝对路径！ -> 输出目录为绝对路径（必需）。

---

在 React 教程课程中（“使用 webpack 构建”） （我用的是windows，但当然是在linux上）

my webpack.config.js

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"]
                
            
        ]
    

project directories

my index.js

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!!

【问题讨论】：

这是一个编码站点，我们希望看到代码，而不仅仅是它输出的错误消息。请edit your question提供，（格式正确）。

@Compo 好的，谢谢 ;)

【参考方案1】：

这里有几个问题：

您使用的密钥无效，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"]
      
    
  ]

【讨论】：

谢谢一百万。是的，它修复了上述错误，但它产生了其他几个错误；) 1-> 输出目录为 absolute path (required) Answer-> 将输出更改为 ( __dirname+"/dist/assets") 2-> 错误：选项/查询不能与 .. "babel-loader"] (loader: "babel-loader") 3-> npm install --save-dev babel-loader@7 4-> 最后webpack --mode development 完成了！！我们应该把代码作为最终答案吗？或者不需要。感谢您的帮助，它非常有用

@Mostafaghafari 我已经用更多信息更新了我的答案:)