获取“错误:`output.path` 需要是绝对路径或`/`"； [英] Getting "Error: `output.path` needs to be an absolute path or `/`"

问题描述

我是 JS 开发的新手，为了尝试使用 webpack-dev-server 热加载更改，我保留了上述异常.确切的堆栈是:

I am new to JS development, in an attempt to hot load changes using webpack-dev-server I keep above exception. The exact stack is:

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 配置文件:

Here are the webpack config files i have tried already:

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 文件

Below is my package.json file

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

推荐答案

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

As the error message says, you need to use absolute path.

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

To get an absolute path for current directory, You can use __dirname to get the current directory and then append dist/js. So it would be something like,

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

两者都可以正常工作.您可以在此处

Both will work just fine. You can read about webpack configuration here

编辑:要使用path: path.join(__dirname, "dist/js")，您需要要求节点的内置path模块.

Edit: To use path: path.join(__dirname, "dist/js") you will need to require node's built-in path module.

引用文档:

路径模块:它提供了用于处理文件和目录路径的实用程序.将它与前缀 __dirname global 一起使用将防止操作系统之间的文件路径问题，并允许相对路径按预期工作.

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 的顶部要求它作为

You can require it at the top of your webpack.config.js as

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

除了以上两种方法，你还可以使用 path.resolve 提到的 此处.

Apart from above two methods, You can also use path.resolve as mentioned here.

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

希望有帮助:)

这篇关于获取“错误:`output.path` 需要是绝对路径或`/`"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！