source - Los mapas de origen no funcionan con Webpack
webpack devtool option (3)
Asegúrese de tener --mode development en su npm compilación npm ,
{
"name": "test",
"version": "1.0.1",
"description": "",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --mode development --open"
"test": "echo /"Error: no test specified/" && exit 1",
},
"author": "",
"license": "",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
},
"dependencies": {}
}
webpack.config.js
const path = require(''path'');
var webpack = require(''webpack'');
module.exports = {
entry: ''./src/web.js'',
devtool: ''inline-source-map'',
output: {
filename: ''main.js'',
path: path.resolve(__dirname, ''dist'')
},
mode: ''development'',
module: {
rules: [{
test: //.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["babel-preset-env"]
}
}
}]
},
devServer: {
inline: true,
contentBase: path.join(__dirname, ''dist''),
compress: true,
port: 9000,
watchOptions: {
index: ''index.html'',
open: true,
poll: true,
watchContentBase: true
}
},
watch: true,
watchOptions: {
aggregateTimeout: 500,
ignored: /node_modules/,
poll: 3000
}
}
Soy bastante nuevo en el paquete web y tengo algunos problemas para configurarlo para producir los mapas fuente necesarios. En los devtools dice
Mapa de origen detectado
pero muestra el paquete y no el código original:
Aquí está mi webpack.config.js:
module.exports = {
entry: [
''webpack-dev-server/client?http://localhost:8080/'',
''webpack/hot/dev-server'',
"./src/index.js"
],
output: {
filename: ''bundle.js'',
path: ''/'',
},
debug: true,
devtool: ''source-map'',
resolve: {
extensions: ['''', ''.jsx'', ''.scss'', ''.js'', ''.json'']
},
module: {
loaders: [
{
test: /(/.js|/.jsx)$/,
exclude: /node_modules/,
loaders: [''react-hot'',''babel'']
},
{
test: //.scss$/,
exclude: /node_modules/,
loaders: ["style", "css?sourceMap", "sass?sourceMap"]
}
]
},
devServer: { hot: true },
plugins: [ new webpack.HotModuleReplacementPlugin() ],
inline: true,
progress: true,
colors: true
};
Y aquí está mi paquete.json:
{
"name": "react-template",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev:test": "./node_modules/.bin/webpack --config webpack.test.config.js",
"test:bundle": "./node_modules/.bin/tape test/bundle.js",
"dev:serve": "./node_modules/.bin/webpack-dev-server --config webpack.development.config.js"
},
"devDependencies": {
"babel-loader": "^6.2.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.23.1",
"node-sass": "^3.8.0",
"on-build-webpack": "^0.1.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-hot-loader": "^1.3.0",
"sass-loader": "^3.2.1",
"style-loader": "^0.13.0",
"tape": "^4.4.0",
"webpack": "^1.12.12",
"webpack-dev-server": "^1.14.1"
}
}
He intentado múltiples variaciones de la opción devtool y leí this , this y this pero no devtool suerte.
Cualquier ayuda sería genial!
Por favor agregue en su archivo webpack.config.js lo siguiente`
devtool: "# inline-source-map",
Puede encontrar información clara al respecto en el sitio de webpack` https://webpack.github.io/docs/configuration.html
También encontrará la captura de pantalla adjunta de la parte del mapa fuente del sitio webpack.