Comment générer des 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 configuration pour générer des sourcemaps. J'exécute webpack serve à partir de la ligne de commande, qui compile avec succès. Mais j'ai vraiment besoin de 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 sur webpack, et en regardant bien que les docs n'aient pas vraiment aidé car je ne suis pas sûr de ce à quoi ce problème est spécifique.
7 réponses
Pour utiliser la carte, vous devez la changer devtool option valeur à partir de true de la valeur, qui disponible en this list, par exemple source-map
devtool: 'source-map'
devtool:'source-map'- Une carte source est émise.
Peut-être que quelqu'un d'autre a ce problème à un moment. Si vous utilisez UglifyJsPlugin dans webpack 2 vous devez spécifier explicitement le sourceMap drapeau. Par exemple:
new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
Configuration minimale du pack Web pour jsx avec sourcemaps:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: `./src/index.jsx` ,
output: {
path: path.resolve(__dirname,"build"),
filename: "bundle.js"
},
devtool: 'eval-source-map',
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
L'Exécuter:
Jozsefs-MBP:react-webpack-babel joco$ webpack -d
Hash: c75d5fb365018ed3786b
Version: webpack 1.13.2
Time: 3826ms
Asset Size Chunks Chunk Names
bundle.js 1.5 MB 0 [emitted] main
bundle.js.map 1.72 MB 0 [emitted] main
+ 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$
Si vous optimisez pour dev + production , vous pouvez essayer quelque chose comme ceci dans votre configuration:
{
devtool: dev ? 'eval-cheap-module-source-map' : 'source-map',
}
- devtool: "eval-cheap-module-source-map" propose des cartes source qui ne mappent que des lignes (pas de mappages de colonnes) et sont beaucoup plus rapides
- devtool: "source-map" impossible de mettre en cache les cartes de source pour les modules et besoin de régénérer la carte de source complète pour le bloc. C'est quelque chose pour la production.
J'utilise webpack 2.1.0-bêta.19
Sur Webpack 2 j'ai essayé toutes les 12 options devtool. Les options suivantes lient au fichier d'origine dans la console et préservent les numéros de ligne. Voir la note ci-dessous concernant les lignes seulement.
Https://webpack.js.org/configuration/devtool
Devtool meilleures options de dev
build rebuild quality look
eval-source-map slow pretty fast original source worst
inline-source-map slow slow original source medium
cheap-module-eval-source-map medium fast original source (lines only) worst
inline-cheap-module-source-map medium pretty slow original source (lines only) best
Lignes seulement
Les mappages sources sont simplifiés en un seul mappage par ligne. Cela signifie généralement un seul mappage par instruction (en supposant que votre auteur est de cette façon). Cela vous évite à partir de l'exécution du débogage au niveau de l'instruction et des paramètres des points d'arrêt sur les colonnes d'une ligne. La combinaison avec la minimisation n'est pas possible car les minimiseurs n'émettent généralement qu'une seule ligne.
REVISITER CE
Sur un grand projet que je trouve ... eval-source-map temps de reconstruction est ~3.5 S... le temps de reconstruction inline-source-map est ~7s
Même le même problème que j'ai rencontré, dans le navigateur, il montrait du code compilé. J'ai fait ci-dessous des changements dans le fichier de configuration webpack et cela fonctionne bien maintenant.
devtool: '#inline-source-map',
debug: true,
Et dans les chargeurs, j'ai gardé babel-loader comme première option
loaders: [
{
loader: "babel-loader",
include: [path.resolve(__dirname, "src")]
},
{ test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
{ test: /\.html$/, loader: 'raw' },
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{test: /\.less$/, loader: "style!css!less"},
{ test: /\.styl$/, loader: 'style!css!stylus' },
{ test: /\.css$/, loader: 'style!css' }
]
Vous pouvez essayer Dawn, c'est plus simple
Https://github.com/alibaba/dawn
Exemple:
Installer
npm i dawn -g
Ajoutez un fichier .dawn.yml à votre projet
build:
- name: webpack
output: ./dist
entry: ./src/*.js
template: ./assets/*.html
sourceMap: true
Exécutez la commande suivante
dn build
Vous pouvez compléter la construction