Javascript Web包中的配置对象无效

我后面跟着伊芙·波切洛。在视频“Building with Webpack”中，我遵循了作者准确描述的步骤，但“Webpack”命令失败，出现以下错误：

配置对象无效。已使用与API架构不匹配的配置对象初始化Web包。 -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的版本1，但您使用的是最新版本2

您可以按照此迁移指南运行代码：

这是您的升级配置

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

---

Webpack比创建react应用程序难一点。 使用以下命令创建react项目的最简单、最简单的方法

---

您可以按照课程中的所有react代码进行操作，但需要webpack，因为创建react应用程序编译jsx代码并执行webpack的所有操作等。

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

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

    {
      "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"
      }
    }

---

这将使用最新的网页进行编译-截至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"],
        }]
    }
}

---

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

卸载最新的网页包（2，如果您刚刚使用

npm安装网页包

）

然后在终端运行

npm安装-gwebpack@1.13.3

（她建议使用

sudo npm install-g

，因此使用与否取决于您自己）

webpack抛出的下一个问题可能只适用于我，但我必须

require（'path'）

，因为我遇到了无法解决的路径错误，并且还必须

npm安装babel loader

，因为出于任何原因，它没有通过

package.json

文件加载，这还需要为

节点\u模块

文件夹添加

路径

我的

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。这里还有其他关于迁移的答案，也应该加以研究

---

希望这对你有帮助

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

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

 var path = require('path')

并将输出更改为以下内容

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

---

作为旁注，在练习文件中，讲师对babel loader使用以下语法：

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”周围的支架可以解决此问题：

或者通过“使用”语法指定加载器及其相应选项：

---

希望他们能在林达那边修好！这些新技术发展得如此之快！有关babel loader的更多信息：

要在最新版本的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文件应该如下所示

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

    {
      "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"
      }
    }

---

确保添加了

constpath=require（'path'）

到webpack.config.js文件的顶部，路径应该类似于

path:path.resolve（\uu dirname，'dist/assets'），

用~规则替换~loaders~~

module: {
    loaders: [
        {

显然，这里的加载器已被规则所取代，因此正确的应该是：

module: {
    rules: [
        {

---

我也有同样的问题，还有更多的问题。因此，我创建了一个shell脚本，以使安装过程更简单、更快

---

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

试试这个脚本，它会成功的

• 下载
• 安装
• 配置

  webpack

• 配置

  babel

• 配置

  server

给你

---

请注意，这仅适用于同时使用

ES6+

、

webpack

、

babel

。

错误是什么？我的代码可能会出错。链接到的迁移指南是404。我已更新到新迁移指南的链接：谢谢，我知道该方法，但我想按照教程中的步骤进行操作。您提供的副本的可能副本对我不起作用。我必须删除“babel loader”周围的[]。“用~rules~替换~loaders~”，正如Leo Leao在下面所说，这是实际的答案。这个代码块根本没有解释这一点。谢谢！互联网上有很多使用“loaders”而不是“rules”的老例子，这就是修复方法。对于任何与Sumar Buma一起学习完整堆栈javascript教程的人来说，如果遇到这个问题，我会帮他解决。