open - Webpack-dev-server no genera mapas fuente

webpack dev server with webpack 4

Question

Yo uso babel-loader , pero no puedo entender cómo generar o dónde encontrar mapas fuente para los archivos transpilados. Intenté eval-source-map , inline-source-map , source-map .

webpack.config.js

const BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
    entry: ''./src/script/index.jsx'',
    output: {
        filename: ''bundle.js'',
        sourceMapFilename: "bundle.js.map",
        publicPath: ''http://localhost:8090/assets''
    },
    debug: true,
    devtool: ''inline-source-map'',
    module: {
        loaders: [
            {   
                test: //.js[x]?$/, 
                loaders: [''react-hot'', ''jsx'', ''babel''],
                exclude: /node_modules/ 
              },
              {
                test: //.scss$/,
                loaders: [ ''style'', ''css?sourceMap'', ''sass?sourceMap'' ]
              },
              {
                test: //.less$/,
                loaders: [ ''style'', ''css?sourceMap'', ''less?sourceMap'' ]
              },
              {
                test: //.css$/,
                loaders: [ ''style'', ''css'']
              },
              { test: //.woff$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff" },
              { test: //.woff2$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff2" },
              { test: //.(eot|ttf|svg|gif|png)$/,    loader: "file-loader" }
        ]
    },
    plugins: [
        new BowerWebpackPlugin()
    ],
    externals: {
        //don''t bundle the ''react'' npm package with our bundle.js
        //but get it from a global ''React'' variable
        ''react'': ''React''
    },
    resolve: {
        extensions: ['''', ''.js'', ''.jsx'']
    }
}

paquete.json

    {
    "name": "Won",
    "version": "0.0.1",
    "description": "Internal evidence application",
    "main": "index.jsx",
    "scripts": {
        "start": "npm run serve | npm run dev",
        "serve": "./node_modules/.bin/http-server -p 8080",
        "dev": "webpack-dev-server -d --progress --colors --port 8090"
    },
    "author": "And",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^5.8.23",
        "babel-loader": "^5.3.2",
        "bootstrap": "^3.3.5",
        "bootstrap-select": "^1.7.3",
        "bootstrap-table": "^1.8.1",
        "bower-webpack-plugin": "^0.1.8",
        "colresizable": "^1.5.2",
        "css-loader": "^0.16.0",
        "events": "^1.0.2",
        "extract-text-webpack-plugin": "^0.8.2",
        "file-loader": "^0.8.4",
        "flux": "^2.1.1",
        "http-server": "^0.8.0",
        "jquery": "^2.1.4",
        "jquery-ui": "^1.10.5",
        "json-markup": "^0.1.6",
        "jsx-loader": "^0.13.2",
        "less": "^2.5.1",
        "less-loader": "^2.2.0",
        "lodash": "^3.10.1",
        "node-sass": "^3.2.0",
        "object-assign": "^4.0.1",
        "path": "^0.11.14",
        "react": "^0.13.3",
        "react-hot-loader": "^1.2.9",
        "sass-loader": "^2.0.1",
        "style-loader": "^0.12.3",
        "svg-sprite-loader": "0.0.2",
        "url-loader": "^0.5.6",
        "webpack": "^1.12.0",
        "webpack-dev-server": "^1.10.1"
    }
}

editar://

Después de todo esto webpack.config.js y este package.json funciona para mí.

edit2: //

Ahora uso esta configuración de paquete web

Answer 1

Agregue {devtool:"source-map"} a su webpack.config.js

Ver más here

Answer 2

Por favor agregue en su archivo webpack.config.js lo siguiente`

devtool: "# inline-source-map",

Puede encontrar información clara al respecto desde el sitio webpack` https://webpack.github.io/docs/configuration.html

También encontrará una captura de pantalla adjunta de la parte del mapa de origen, del sitio webpack.

Answer 3

Todo lo que hice fue cambio:

// package.json
{
    ...
    **from** "dev:serve": "webpack-dev-server",
    **to** "dev:serve": "webpack-dev-server -d",
    ...
}

Equivalente a: $ webpack-dev-server -d

Ahora puedo utilizar Ctrl + p en Chrome y veo mi sintaxis de ES6 para establecer puntos de interrupción.

Información

$ webpack-dev-server --version
webpack-dev-server 2.9.7
webpack 3.10.0

Answer 4

Usar webpack -d

La bandera d significa atajo de desarrollo y habilita todas sus herramientas de desarrollador, como mapas de origen.

Answer 5

Utilice webpack-dev-server -d

• -d es la abreviatura de --debug --devtool source-map --output-pathinfo .

• output-pathinfo agrega comentarios al paquete generado que explica qué módulo / archivos se incluyen en qué lugares. Entonces en el código generado, el comentario se agrega a esta línea de código: require(/* ./test */23) que dice que 23 apunta al módulo de test . Esto es más útil cuando se mira el código generado por Webpack, y no tanto cuando se pasa por el depurador. Obtuve este ejemplo de esta documentación relevante .

• Todo esto funciona porque webpack-dev-server acepta todos los mismos indicadores que el webpack .

• Vea esta sección en los documentos para más detalles.

Consejos y trampas

• --content-base - de forma predeterminada, el servidor de desarrollo servirá los archivos en el directorio en el que ejecuta el comando. Si sus archivos de compilación están en build/ , debe especificar --content-base build/ para que el servidor de desarrollo sirva archivos en el directorio de build
• --inline - ¡ --inline automáticamente cada vez que guarde un archivo con algunos cambios!