Webpack-dev-serveur ne génère pas de source maps
- Je utiliser babel-chargeur, mais ne peut pas comprendre comment générer ou où trouver la source des cartes pour transpiled fichiers. J'ai essayé eval-source-map
, inline-source-map
, source-map
.
webpack.config.js
const BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
entry: './src/script/index.jsx',
output: {
filename: 'bundle.js',
sourceMapFilename: "bundle.js.map",
publicPath: 'http://localhost:8090/assets'
},
debug: true,
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /\.js[x]?$/,
loaders: ['react-hot', 'jsx', 'babel'],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
},
{
test: /\.less$/,
loaders: [ 'style', 'css?sourceMap', 'less?sourceMap' ]
},
{
test: /\.css$/,
loaders: [ 'style', 'css']
},
{ test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2" },
{ test: /\.(eot|ttf|svg|gif|png)$/, loader: "file-loader" }
]
},
plugins: [
new BowerWebpackPlugin()
],
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
}
paquet.json
{
"name": "Won",
"version": "0.0.1",
"description": "Internal evidence application",
"main": "index.jsx",
"scripts": {
"start": "npm run serve | npm run dev",
"serve": "./node_modules/.bin/http-server -p 8080",
"dev": "webpack-dev-server -d --progress --colors --port 8090"
},
"author": "And",
"license": "ISC",
"devDependencies": {
"babel-core": "^5.8.23",
"babel-loader": "^5.3.2",
"bootstrap": "^3.3.5",
"bootstrap-select": "^1.7.3",
"bootstrap-table": "^1.8.1",
"bower-webpack-plugin": "^0.1.8",
"colresizable": "^1.5.2",
"css-loader": "^0.16.0",
"events": "^1.0.2",
"extract-text-webpack-plugin": "^0.8.2",
"file-loader": "^0.8.4",
"flux": "^2.1.1",
"http-server": "^0.8.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.5",
"json-markup": "^0.1.6",
"jsx-loader": "^0.13.2",
"less": "^2.5.1",
"less-loader": "^2.2.0",
"lodash": "^3.10.1",
"node-sass": "^3.2.0",
"object-assign": "^4.0.1",
"path": "^0.11.14",
"react": "^0.13.3",
"react-hot-loader": "^1.2.9",
"sass-loader": "^2.0.1",
"style-loader": "^0.12.3",
"svg-sprite-loader": "0.0.2",
"url-loader": "^0.5.6",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.10.1"
}
}
edit://
Après tout ce webpack.config.js et ce package.json fonctionne pour moi.
edit2://
Maintenant, j'utilise cette webpack config
- Notez qu'étant donné que vous êtes à l'aide de Babel, vous sautez jsx-loader. Donc, juste
['hot-loader', 'babel']
est assez. Babel prend en charge JSX par défaut. - Tout progrès en la matière? Je suis en cours d'exécution dans la même situation. Merci.
- pour moi, il fonctionne maintenant, mais je ne sais pas ce que j'ai changé. Si vous le souhaitez, je peux vous envoyer mon webpack.config et l'emballage.json.
- Je n'aurais certainement upvote une réponse qui a des mises à jour webpack.config et l'emballage.json. 🙂
- veuillez voir mon édité question. Il est mon webpack.config et l'emballage.json qui fonctionne pour moi
- Oh, désolé. Merci. Duh. 🙂
Vous devez vous connecter pour publier un commentaire.
Utilisation
webpack -d
La
d
drapeau représente pour le développement de raccourci et il permet à l'ensemble de vos outils de développement tels que la source des cartes.webpack-dev-server
🙁node_modules/.bin/webpack-dev-server -d --port 10141 --content-base build
Utilisation
webpack-dev-server -d
-d
est un raccourci pour--debug --devtool source-map --output-pathinfo
.output-pathinfo
ajoute des commentaires au module d'expliquer ce module/les fichiers sont inclus dans ce lieux. Ainsi, dans le code généré, le commentaire est ajouté à cette ligne de code:require(/* ./test */23)
qui dit que23
vers letest
module. Ce qui est surtout utile lorsque vous êtes en train de regarder le code Webpack a généré, et non pas lors de la progression dans le débogueur. J'ai reçu cet exemple à partir de cette peu de documentation.Tout cela fonctionne parce que
webpack-dev-server
accepte tout de même des drapeaux,webpack
.Trucs & astuces
--content-base
- par défaut, le serveur de dev va servir des fichiers dans le répertoire que vous exécutez la commande dans. Si vos fichiers sont dansbuild/
, vous devez spécifier--content-base build/
de sorte que le serveur de développement qui servira de fichiers dans lebuild
répertoire--inline
- auto-rechargement à chaque fois que vous enregistrez un fichier avec quelques modifications!Ajouter
{devtool:"source-map"}
à votre webpack.config.jsVoir plus ici
cheap-module-eval-source-map
et il n'a pas travaillé, j'ai essayé quelques autres options à partir de ce lien et il fonctionne très bien maintenant aveceval-source-map
cheap-module-eval-source-map
. D'autres types de bien fonctionner pour moi.Veuillez ajouter en vous webpack.config.js le fichier suivant`
Vous pouvez trouver des informations claires à ce sujet sur le site de webpack` https://webpack.github.io/docs/configuration.html
Aussi s'il vous plaît trouver ci-joint la capture d'écran de sourcemap partie, à partir de webpack site.
Tout ce que je fait c'est de changer:
Équivalent à:
$ webpack-dev-server -d
Maintenant, je peux utiliser
Ctrl + p
dans google Chrome, et je vois mon ES6 syntaxe pour définir des points d'arrêt sur.Info