Getting "Error: `output.path` needs to be an absolute path or `/`"

Question

我是 JS 开发的新手，试图使用 webpack-dev-server 热加载更改，我保持上述异常。确切的堆栈是：

Error: `output.path` needs to be an absolute path or `/`.
at Object.Shared.share.setFs (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/lib/Shared.js:88:11)
at Shared (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/lib/Shared.js:214:8)
at module.exports (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-middleware/middleware.js:22:15)
at new Server (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/lib/Server.js:56:20)

at startDevServer (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:379:12)
at processOptions (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:317:3)
at Object.<anonymous> (/Users/mybox/work/day1/ex6/node_modules/webpack-dev-server/bin/webpack-dev-server.js:441:1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)

这是我已经尝试过的 webpack 配置文件：

module.exports = {
    entry: "./client/app.jsx",
    output: {
        path: "dist/js",
        filename: "bundle.js",
        publicPath: "http://127.0.0.1:2992/js"
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                include: /client/
            }
        ]
    }
};

并且：

module.exports = {
    entry: "./client/app.jsx",
    output: {
        path: "/Users/mybox/work/day1/ex6/dist/js",
        filename: "bundle.js",
        publicPath: "http://127.0.0.1:2992/js"
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                include: /client/,
                query: {
                    presets:['react']
                }
            }
        ]
    }
};

下面是我的package.json文件

{
 "name": "ex6",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
   "server": "node index.js",
   "hot": "webpack-dev-server --inline --hot --port 2992 --progress --colors",
   "dev": "webpack-dev-server --inline --dev --port 2992 --progress --colors"
 },
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
  "babel-preset-es2015": "^6.22.0",
  "hapi": "^16.1.0",
  "inert": "^4.1.0"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-react": "^6.22.0",
"builder": "^3.2.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"description": ""
}

Answer 1

正如错误信息所说，您需要使用绝对路径。

要获取当前目录的绝对路径，可以使用__dirname获取当前目录，然后追加dist/js。 所以它会是这样的，

output: {
    path: __dirname + "/dist/js", // or path: path.join(__dirname, "dist/js"),
    filename: "bundle.js"
}

两者都可以正常工作。你可以阅读 webpack 配置 here

编辑：要使用path: path.join(__dirname, "dist/js")，您需要需要节点的built-in path模块。

引用自文档：

Path module: It provides utilities for working with file and directory paths. Using it with the prefix __dirname global will prevent file path issues between operating systems and will allow relative paths to work as expected.

您可以在 webpack.config.js 的顶部要求它作为

var path = require('path');
.....
....
..
output: {
    path: path.join(__dirname, "dist/js"),
    filename: "bundle.js"
}
// rest of the configuration

除了以上两种方法，您还可以使用path.resolve，如here。

path: path.resolve(__dirname, "dist/js")

希望对您有所帮助:)

Answer 2

您可以像下面的代码一样使用它来获取绝对路径。

output: {
  path: require('path').resolve("./dist/js"),
  filename: 'bundle.js',
  publicPath: 'http://127.0.0.1:2992/js'
}

Answer 3

您需要将其包含在 webpack.config.js 文件 var path = require('path') 的顶部 然后在您的路径中执行以下操作：path: path.join(__dirname, "dist/js")

Answer 4

您可以使用__dirname获取当前执行文件的路径。

const webpack = require('webpack')

module.exports = {
    mode: 'development',
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/dist",
        filename: 'main.js'
    }
}

您还可以导入内置 path API 并使用 resolve 方法，我认为 webpack 更喜欢这种方法

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

module.exports = {
    mode: 'development',
    entry:  path.resolve("./src/index.js"),
    output: {
        path: path.resolve("./dist"),
        filename: 'main.js'
    }
}

Answer 5

这是作者的一个设计笑话，叫做 aymmetric system-inconsistency，你可以从那里的问题中找到更多细节：https://github.com/webpack/webpack/issues/1908.