Webpack 获得;错误:`output.path`必须是绝对路径或`/`";
我是JS开发新手,试图使用webpack dev server热加载更改,我保留了上述异常。确切的堆栈是:Webpack 获得;错误:`output.path`必须是绝对路径或`/`";,webpack,webpack-dev-server,Webpack,Webpack Dev Server,我是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/
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)
以及:
下面是我的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": ""
}
正如错误消息所说,您需要使用绝对路径
output: {
path: require('path').resolve("./dist/js"),
filename: 'bundle.js',
publicPath: 'http://127.0.0.1:2992/js'
}
要获取当前目录的绝对路径,可以使用获取当前目录,然后追加dist/js
。
所以会有点像
output: {
path: __dirname + "/dist/js", // or path: path.join(__dirname, "dist/js"),
filename: "bundle.js"
}
两种方法都很好。您可以阅读有关网页包配置的信息
编辑:要使用路径:path.join(\uu dirname,“dist/js”)
您需要节点的内置路径
模块
从文件中引用:
路径模块:
它提供用于处理文件和目录路径的实用程序。将其与前缀_dirname global一起使用将防止操作系统之间的文件路径问题,并允许相对路径按预期工作
您可以在webpack.config.js
as的顶部要求它
var path = require('path');
.....
....
..
output: {
path: path.join(__dirname, "dist/js"),
filename: "bundle.js"
}
// rest of the configuration
除了上述两种方法外,还可以使用前面提到的path.resolve
希望它有帮助:)您可以像下面的代码一样使用它来获得绝对路径
output: {
path: require('path').resolve("./dist/js"),
filename: 'bundle.js',
publicPath: 'http://127.0.0.1:2992/js'
}
您需要将其包含在或webpack.config.js文件的顶部
var path=require('path')
然后在路径中执行以下操作:path:path.join(\uu dirname,“dist/js”)
可以用来获取当前执行文件的路径
const webpack = require('webpack')
module.exports = {
mode: 'development',
entry: __dirname + "/src/index.js",
output: {
path: __dirname + "/dist",
filename: 'main.js'
}
}
您也可以导入内置API并使用解析方法,我认为这是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'
}
}
出于某种原因,我仍然得到路径“./dist/js”的相同异常,而uu dirname+“dist/js”工作正常。
/dist/js
是相对路径。也许这就是你出错的原因。但在我的项目中,它运行良好。您正在使用哪个版本的网页包?网页包“^2.2.1”,“网页包开发服务器“^2.3.0”能否更具体一点?出现了什么错误?如果路径未定义,是否需要路径为var path=require('path')
?@hungryWolf我不知道为什么会做出这个设计决定,但这对webpack
用户来说是一个限制和一致性问题。我们很快就可以为输出使用相对路径值。路径
。您可以访问此PR以了解详细信息:路径中不需要。应该在文件顶部定义该值,以便它可以n不能为其他路径引用。这是错误的做法。
const webpack = require('webpack')
module.exports = {
mode: 'development',
entry: __dirname + "/src/index.js",
output: {
path: __dirname + "/dist",
filename: 'main.js'
}
}
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'
}
}