webpack 中的无效配置对象

Question

我正在关注 Lynda.com - Eve Porcello 的 React.js 基本培训。在“使用 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"]
        }
      }
    ]
  }
}

包.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 的东西还很陌生，所以我无法找出真正的问题是什么，以及它需要什么样的绝对路径。我还尝试了对另一个（类似）问题的某些答案所建议的绝对路径，但这没有用。

谢谢！

原文由 Indu Pillai 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Jean-Louis Brunet 发布，翻译遵循 CC BY-SA 3.0 许可协议