Ich bin neu im Webpack und brauche eine Hand beim Einrichten, um Quellkarten zu generieren. Ich laufe webpack serve
von der Kommandozeile aus, die erfolgreich kompiliert wird. Aber ich brauche wirklich Sourcemaps. Das ist mein 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()
]
};
Ich bin wirklich neu im Webpack und es hat nicht wirklich geholfen, die Dokumente zu lesen, da ich nicht sicher bin, wofür dieses Problem spezifisch ist.
The 'debug' property was removed in webpack 2.
Antworten:
Zur Verwendung Quelle Karte, sollten Sie ändern
devtool
Option Wert austrue
auf den Wert , die inthis list
zum Beispielsource-map
quelle
denug
Eigenschaft wurde in Webpack 2 entfernt.devtool
ist genug. Kein Debug-Wert erforderlich.Vielleicht hat jemand anderes dieses Problem an einem Punkt. Wenn Sie das
UglifyJsPlugin
in verwendenwebpack 2
, müssen Sie dassourceMap
Flag explizit angeben . Zum Beispiel:quelle
devtool: 'source-map'
damit es funktioniertMinimale Webpack-Konfiguration für jsx mit Quellkarten:
Ausführen:
quelle
Wenn Sie für dev + product optimieren , können Sie in Ihrer Konfiguration Folgendes ausprobieren:
Aus den Dokumenten:
Ich verwende Webpack 2.1.0-beta.19
quelle
dev
Variable gesetzt?.env
definierte Dateien oder Mutationen angezeigtprocess.env
. Dies ist nur ein Beispiel, aber es könnte so aussehen:const dev = process.env.development === true
Auf Webpack 2 habe ich alle 12 devtool-Optionen ausprobiert. Die folgenden Optionen verknüpfen die Originaldatei in der Konsole und behalten die Zeilennummern bei. Siehe den Hinweis unten nur zu Zeilen.
https://webpack.js.org/configuration/devtool
devtool beste dev Optionen
nur Zeilen
Quellzuordnungen werden auf eine einzelne Zuordnung pro Zeile vereinfacht. Dies bedeutet normalerweise eine einzelne Zuordnung pro Anweisung (vorausgesetzt, Ihr Autor ist dies). Dies verhindert, dass Sie die Ausführung auf Anweisungsebene debuggen und Haltepunkte für Spalten einer Zeile festlegen. Eine Kombination mit Minimierung ist nicht möglich, da Minimierer normalerweise nur eine einzige Zeile ausgeben.
ÜBERARBEITUNG DIESES
Bei einem großen Projekt finde ich ... die Wiederherstellungszeit für die Eval-Source-Map beträgt ~ 3,5 Sekunden ... Die Wiederherstellungszeit für die Inline-Source-Map beträgt ~ 7 Sekunden
quelle
Sogar das gleiche Problem, mit dem ich konfrontiert war, zeigte im Browser kompilierten Code an. Ich habe unten Änderungen in der Webpack-Konfigurationsdatei vorgenommen und es funktioniert jetzt einwandfrei.
und bei ladern habe ich babel-loader als erste option behalten
quelle
debug
Eigenschaft wurde in Webpack 2 entfernt.include
Option hat es für mich behoben. In Webpack 2 sieht es so aus:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]