web-dev-qa-db-fra.com

Obtenir "Erreur:` output.path` doit être un chemin absolu ou `/` "

Je suis nouveau dans le développement de JS, dans une tentative de chargement à chaud des modifications à l'aide de webpack-dev-server, je le garde au-dessus de l'exception. La pile exacte est:

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)

Voici les fichiers de configuration webpack que j'ai déjà essayés:

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/
            }
        ]
    }
};

Et:

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']
                }
            }
        ]
    }
};

Ci-dessous mon fichier 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": ""
}
webpackwebpack-dev-server
27
rajoriav

Comme le message d'erreur le dit, vous devez utiliser un chemin absolu.

Pour obtenir un chemin absolu pour le répertoire actuel, vous pouvez utiliser __ dirname pour obtenir le répertoire actuel, puis ajouter dist/js. Donc, ce serait quelque chose comme,

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

Les deux fonctionneront très bien. Vous pouvez en savoir plus sur la configuration du webpack here

Edit : Pour utiliser path: path.join(__dirname, "dist/js"), vous aurez besoin du module path intégré au noeud.

Citant les docs:

Module de chemin : Il fournit des utilitaires pour travailler avec les chemins de fichiers et de répertoires. Son utilisation avec le préfixe __dirname global évitera les problèmes de chemins de fichiers entre systèmes d’exploitation et permettra aux chemins relatifs de fonctionner comme prévu.

Vous pouvez en avoir besoin en haut de votre webpack.config.js

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

Outre les deux méthodes ci-dessus, vous pouvez également utiliser path.resolve Comme indiqué ici .

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

J'espère que ça aide :)

71
Hardik Modha

Vous pouvez utiliser __ dirname pour obtenir le chemin actuel du fichier exécuté.

const webpack = require('webpack')

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

Vous pouvez également importer la version chemin API et utiliser la méthode de résolution, je pense que celle-ci est préférée par 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'
    }
}
0
Aung Zan Baw

vous devez inclure ceci au sommet du fichier webpack.config.js var path = require('path'), puis dans votre chemin, procédez comme suit: path: path.join(__dirname, "dist/js")

0
Michael Guild