source - Los mapas de origen no funcionan con Webpack

webpack devtool option

Question

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!

Answer 1

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
    }
}

Answer 2

En bundle.js verá un paquete de paquete web original transpilado - este es el comportamiento normal.

Abra el webpack:// y verá los archivos de su proyecto.

Answer 3

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.