webpack 中的配置对象无效

Posted 2023-02-22

【中文标题】webpack 中的配置对象无效

【英文标题】：Invalid configuration object in webpack

【发布时间】：2017-08-20 08:35:23

【问题描述】：

我正在关注 Eve Porcello 的 Lynda.com - React.js essential training。在“使用 Webpack 构建”视频中，我完全按照作者描述的步骤操作，但“webpack”命令失败并出现以下错误，

配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - configuration.output.path：提供的值“dist/assets”不是绝对路径！

以下是我的 webpack.config.js 和 package.json 文件。

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", "stage-0", "react"]
        
      
    ]
  

package.json

  "name": "react-essential",
  "version": "1.0.0",
  "description": "A project focusing on React and related tools",
  "main": "index.js",
  "scripts": 
    "start": "httpster -d ./dist -p 3000"
  ,
  "author": "Indu Pillai",
  "license": "MIT",
  "devDependencies": 
    "babel-cli": "^6.18.0",
    "babel-loader": "^6.4.1",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  

我一遍又一遍地重复这些步骤，但它不起作用。我对这个 webpack 很陌生，所以我无法找出真正的问题，以及它需要什么样的绝对路径。我还尝试了另一个（类似）问题的一些答案所建议的绝对路径，但这没有用。

谢谢！

【问题讨论】：

Invalid configuration object output.path is not an absolute path的可能重复

您提供的副本对我不起作用。

【参考方案1】：

这将使用最新的 webpack 编译 - 截至 2017 年 4 月 10 日：

var webpack = require("webpack");

module.exports = 
    entry: __dirname + "/src/index.js",
    output: 
        path: __dirname + "/dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    ,
    devServer: 
        inline: true,
        contentBase: __dirname + "/dist",
        port: 3000
    ,
    module: 
        rules: [
            test: /\.js$/,
            loader: ["babel-loader"],
        ]
    

【讨论】：

我必须删除“babel-loader”周围的 []。

"replace ~loaders~ by ~rules~"，正如 Leo Leao 下面所说，是实际的答案。这个代码块根本没有解释。

【参考方案2】：

我正在和你做同样的课程，我必须执行以下操作才能让 Webpack 正确输出 bundle.js 文件：

卸载最新的webpack（2，如果你刚刚使用npm install webpack） 然后在终端运行npm install -g webpack@1.13.3（她建议使用sudo npm install -g，所以使用sudo取决于你） 下一个问题 webpack 抛出的几个问题可能只适用于我，但我不得不require('path')，因为我遇到了无法解析的路径错误，还不得不npm install babel-loader，因为它没有通过@987654327 加载@ 文件无论出于何种原因，也需要为 node_modules 文件夹添加 path.resolve

我的webpack.config 文件现在如下所示：

const webpack = require('webpack');
const path = require('path');

module.exports = 
    entry: path.resolve(__dirname, './src/index'),
    output: 
        path: path.resolve(__dirname, './dist/assets'),
        filename: 'bundle.js',
        publicPath: 'assets'
    ,
    devServer: 
        inline: true,
        contentBase: path.resolve(__dirname, './dist'),
        port: 3000
    ,
    module: 
        loaders: [
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: path.resolve(__dirname, './node_modules/babel-loader'),
            query: 
                presets: ['latest', 'stage-0', 'react']
            
        ]
    

最后，运行 webpack --display-error-details 向我展示了错误是什么，但我在这里粘贴的配置文件最终对我有用。

应该注意的是，这将（希望）让您完成课程本身，但它不会帮助您了解更新或需要迁移的内容以保持最新并使用 Webpack 2。还有其他此处涉及迁移的答案也应予以研究。

希望对你有帮助！

【参考方案3】：

将~loaders~替换为~rules~

module: 
    loaders: [
        

显然这里的loaders这个词被规则替换了，所以正确的应该是：

module: 
    rules: [
        

【讨论】：

谢谢！互联网上到处都是使用“加载程序”而不是“规则”的旧示例，这就是修复。

对于任何与 Sumar Buma 一起完成完整堆栈 javascript 教程的人遇到此问题，这为我解决了问题。

【参考方案4】：

本教程是使用 Webpack 版本 1 完成的，但您使用的是最新版本 2。

您可以按照此迁移指南运行您的代码：https://webpack.js.org/migrate/3/

这是升级后的配置

var webpack = require("webpack");
var folder = __dirname;

module.exports = 
  entry: "./src/index.js",
  output: 
    path: folder + "dist/assets",
    filename: "bundle.js",
    publicPath: "/assets"
  ,
  devServer: 
    inline: true,
    contentBase: folder + "dist",
    port: 3000
  ,
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: "babel-loader",
        query: 
          presets: ["latest", "stage-0", "react"]
        
      
    ]
  

【讨论】：

错误是什么？我的代码可能会出错。

迁移指南链接到的是 404。

我更新了新迁移指南的链接：webpack.js.org/migrate/3

【参考方案5】：

Webpack 并不比 create-react-app 难。 使用https://facebook.github.io/react/docs/installation.html 的以下命令创建 React 项目的最简单和最简单的方法

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

您可以关注课程中的所有 react 代码，但期望使用 webpack，因为 create-react-app 编译 jsx 代码并完成 webpack 等的所有操作。

【讨论】：

谢谢，我知道这种方法，但我想按照他们所做的确切步骤来遵循教程。

【参考方案6】：

作为旁注，在练习文件中，讲师使用以下语法用于 babel 加载器：

loaders: [
    
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: ["babel-loader"],
        query: 
            presets: ["latest", "stage-0", "react"]
        
    ,
]

在 webpack 2.5.0 上失败并出现错误：

Error: options/query cannot be used with loaders (use options for each array item)

这可以通过删除“babel-loader”周围的括号来解决：

loader: "babel-loader", //no brackets - not an array

或者通过“use”语法指定加载器及其对应的选项：

loaders: [
    
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: 
            loader: 'babel-loader',
            options: 
                presets: ['latest', 'stage-0', 'react']
            
        
    
]

希望他们在 Lynda 那里解决这个问题！这些新技术发展得如此之快！有关 babel-loader 的更多信息：https://github.com/babel/babel-loader

【参考方案7】：

当你迁移到新版本的 webpack 时，会出现这个错误。为了解决这个问题，您必须像这样提供目录的绝对路径

module.exports = 
    entry: __dirname + '/src/index.js',
    output: 
        path: __dirname + '/dist',
        filename: 'bundle.js'
    
;

【参考方案8】：

需要将 output.path 定义为绝对路径

可以在 webpack.config.js 前面添加下面一行

 var path = require('path')

并将输出更改为以下内容

 output: 
   path: path.resolve(__dirname, "dist/assets"),
   filename: "bundle.js",
   publicPath: "assets"
 

【参考方案9】：

要使其与最新版本的 webpack v3 一起工作，您需要对 webpack.config.js 文件进行一些更改。更新后你的代码应该是这样的

            var webpack = require("webpack");
            var path = require('path')

            module.exports = 
                entry: path.resolve(__dirname + "/src/index.js"),
                output: 
                    path: path.resolve(__dirname + "/dist/assets"),
                    filename: "bundle.js",
                    publicPath: "assets"
                ,
                devServer: 
                    inline: true,
                    contentBase: __dirname + '/dist',
                    port: 3000
                ,
                module: 
                    loaders: [
                        
                            test: /\.js$/,
                            exclude: /(node_modules)/,
                    use: 
                    loader: "babel-loader",
                            options: 
                                presets: ["latest", "stage-0", "react"]
                            
                        
                
                    ]
                
            

你的 package.json 文件应该是这样的

    
      "name": "activity-counter-application",
      "version": "1.0.0",
      "description": "A project focusing on building Activity Counter using React and related tools",
      "main": "./index.js",
      "scripts": 
        "start": "./node_modules/.bin/webpack-dev-server"
      ,
      "author": "RJ",
      "license": "MIT",
      "devDependencies": 
        "babel-cli": "^6.24.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-latest": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "webpack": "^3.5.1",
        "webpack-dev-server": "^2.7.0"
      ,
      "dependencies": 
        "react": "^15.6.1",
        "react-dom": "^15.6.1"
      
    

【参考方案10】：

确保将 const path = require('path'); 添加到 webpack.config.js 文件的顶部，并且路径应类似于 path: path.resolve(__dirname, 'dist/assets'),

【参考方案11】：

我遇到了同样的问题，还有更多问题。所以我创建了一个shell脚本来让安装过程更简单更快。

---

Linux 用户

试试这个bash 脚本auto_conf_wb 和它

下载 安装 配置webpack 配置babel 配置sever

为你。

请注意，这仅适用于ES6+、webpack、babel 一起使用。