Comment puis-je générer sourcemaps lors de l'utilisation de babel et webpack?
Je suis nouveau sur webpack, et j'ai besoin d'un coup de main dans la mise en place de générer sourcemaps. Je suis en cours d'exécution webpack serve
à partir de la ligne de commande, qui compile correctement. Mais j'ai vraiment besoin sourcemaps. C'est mon webpack.config.js
.
var webpack = require('webpack');
module.exports = {
output: {
filename: 'main.js',
publicPath: '/assets/'
},
cache: true,
debug: true,
devtool: true,
entry: [
'webpack/hot/only-dev-server',
'./src/components/main.js'
],
stats: {
colors: true,
reasons: true
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'styles': __dirname + '/src/styles',
'mixins': __dirname + '/src/mixins',
'components': __dirname + '/src/components/',
'stores': __dirname + '/src/stores/',
'actions': __dirname + '/src/actions/'
}
},
module: {
preLoaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'jsxhint'
}],
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'react-hot!babel-loader'
}, {
test: /\.sass/,
loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
}, {
test: /\.scss/,
loader: 'style-loader!css!sass'
}, {
test: /\.(png|jpg|woff|woff2)$/,
loader: 'url-loader?limit=8192'
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
Je suis vraiment nouveau à webpack, et en regardant si la documentation n'a pas vraiment aidé car je ne suis pas sûr de ce que ce problème est spécifique.
- Pour info ne pas ajouter de débogage pour la version 2 , j'ai eu
The 'debug' property was removed in webpack 2.
- Related post - quelle est la différence en utilisant eval et eval-source-map?
Vous devez vous connecter pour publier un commentaire.
Afin d'utiliser la carte, vous devez modifier
outil développeur d'internet explorer
option valeur detrue
à la valeur qui disponible encette liste
, par exemplesource-map
denug
propriété a été supprimé dans le webpack 2.devtool
est assez. Pas besoin de débogage de la valeur.Peut-être quelqu'un d'autre a ce problème à un moment. Si vous utilisez le
UglifyJsPlugin
danswebpack 2
vous devez explicitement spécifier lasourceMap
drapeau. Par exemple:devtool: 'source-map'
pour que cela fonctionneMinimale webpack config pour jsx avec sourcemaps:
L'exécutant:
devtool: 'eval-source-map'
qu'il a été. MerciSi l'optimisation pour les dev + production, vous pouvez essayer quelque chose comme cela dans votre config:
À partir de la documentation:
Je suis en utilisant webpack 2.1.0-bêta.19
Sur Webpack 2 j'ai essayé toutes les 12 options de l'outil développeur d'internet explorer. Les options suivantes lien vers le fichier original dans la console et de préserver les numéros de ligne. Voir la note ci-dessous re: lignes seulement.
https://webpack.js.org/configuration/devtool
outil développeur d'internet explorer meilleur dev options
lignes seulement
Source Cartes sont simplifiées à un seul cartographie par ligne.
Cela signifie généralement une seule cartographie par déclaration (en supposant que vous avez de l'auteur est de cette façon).
Cela vous empêche de débogage sur l'exécution de la déclaration de niveau et de paramètres des points d'arrêt sur les colonnes d'une ligne.
En combinant avec la minimisation n'est pas possible que minimizers habituellement seulement émettent une seule ligne.
UN RÉEXAMEN DE CETTE
Sur un grand projet que je trouve ... eval-source-carte le temps de reconstruction est de ~3,5 s ... inline-source-carte le temps de reconstruction est ~7s
Même même problème, j'ai fait face, dans le navigateur, il a été montrant le code compilé. J'ai fait ci-dessous les changements dans webpack fichier de configuration et il fonctionne très bien maintenant.
et chargeurs j'ai gardé babel-chargeur comme première option
debug
propriété a été supprimé dans le webpack 2.include
option est ce qu'il fixe pour moi. Dans webpack 2 il ressemble à ceci:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]
Vous pouvez essayer de l'Aube, c'est plus simple
https://github.com/alibaba/dawn
exemple:
Installer
Ajouter un
.dawn.yml
fichier à votre projetExécuter la commande suivante
Vous pouvez terminer la génération