Cómo resolví y depuré mi problema de Webpack a través de prueba, error y un poco de ayuda externa.

Vea el original en: https://www.instagram.com/p/BdCxrMcn-k5/?taken-by=riittagirl

Yo diría que este fue un gran viaje. Sabía que Webpack no era fácil de configurar: hay muchas partes con muchas opciones, hay npm hell, y cambian con nuevas versiones. No es de extrañar que pueda convertirse fácilmente en una tarea problemática para depurar cuando algo no sale como esperaba (es decir, no como está en los documentos).

Intentando depurar

Mi viaje de depuración comenzó con la siguiente configuración:

webpack.config.js

// webpack v4.6.0
const path = require ('ruta');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
const webpack = require ('webpack');
module.exports = {
  entrada: {main: './src/index.js'},
  salida: {
    ruta: ruta.resolver (__ dirname, 'dist'),
    nombre de archivo: '[nombre]. [chunkhash] .js'
  },
  devServer: {
    contentBase: './dist',
    caliente: cierto
    abierto: verdadero
  },
  módulo: {
    reglas: [
      {
        prueba: /\.js$/,
        excluir: / node_modules /,
        utilizar: [
          {cargador: 'babel-loader'},
          {
            cargador: 'eslint-loader',
            opciones: {
              formateador: require ('eslint / lib / formateadores / elegante')
            }
           }
         ]
       }
     ]
  },
  complementos: [
    nuevo CleanWebpackPlugin ('dist', {}),
    nuevo HtmlWebpackPlugin ({
      inyectar: ​​falso
      hash: cierto
      plantilla: './src/index.html',
      nombre de archivo: 'index.html'
    }),
    nuevo WebpackMd5Hash ()
  ]
};

package.json

{
  "nombre": "publicación",
  "versión": "1.0.0",
  "descripción": "",
  "main": "index.js",
  "guiones": {
    "build": "paquete web - producción en modo",
    "dev": "webpack-dev-server"
   },
  "autor": "",
  "licencia": "ISC",
  "devDependencies": {
    "babel-cli": "^ 6.26.0",
    "babel-core": "^ 6.26.0",
    "babel-loader": "^ 7.1.4",
    "babel-preset-env": "^ 1.6.1",
    "babel-preset-react": "^ 6.24.1",
    "babel-runtime": "^ 6.26.0",
    "clean-webpack-plugin": "^ 0.1.19",
    "eslint": "^ 4.19.1",
    "eslint-config-prettier": "^ 2.9.0",
    "eslint-loader": "^ 2.0.0",
    "eslint-plugin-prettier": "^ 2.6.0",
    "eslint-plugin-react": "^ 7.7.0",
    "html-webpack-plugin": "^ 3.2.0",
    "más bonita": "^ 1.12.1",
    "reaccionar": "^ 16.3.2",
    "react-dom": "^ 16.3.2",
    "webpack": "^ 4.6.0",
    "webpack-cli": "^ 2.0.13",
    "webpack-dev-server": "^ 3.1.3",
    "webpack-md5-hash": "0.0.6"
  }
}

.babelrc

{
  "presets": ["env", "react"]
}

.eslintrc.js

module.exports = {
  env: {
    navegador: verdadero,
    commonjs: verdadero,
    es6: verdadero
  },
  se extiende: [
    'eslint: recomendado',
    'plugin: reaccionar / recomendado',
    más bonita
    'plugin: más bonito / recomendado'
  ],
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: verdadero,
      jsx: verdadero
    },
    sourceType: 'módulo'
  },
  complementos: ['reaccionar', 'más bonito'],
  reglas: {
    guión: ['error', 2],
    'linebreak-style': ['error', 'unix'],
    comillas: ['advertir', 'soltero'],
    semi: ['error', 'siempre'],
    'no-no-vars': [
      'advertir',
      {vars: 'all', args: 'none', ignoreRestSiblings: false}
    ],
    'prettier / prettier': 'error'
   }
};

prettier.config.js

// .prettierrc.js
module.exports = {
  ancho de impresión: 80,
  tabWidth: 2,
  semi: cierto,
  singleQuote: verdadero,
  bracketSpacing: verdadero
};

Y en la carpeta src /:

index.html


  
 
    
      

index.js

importar Reaccionar desde 'reaccionar';
importar {render} desde 'react-dom';
importar Hola desde './Hola';
La aplicación de clase extiende React.Component {
  render () {
    regreso (
      
              
    );   } } render (, document.getElementById ('aplicación'));

Hola.js

importar Reaccionar desde 'reaccionar';
importar PropTypes desde 'prop-types';
clase Hello extiende React.Component {
  render () {
    return 
{this.props.hello}
;   } }
Hola.propTypes = {
  hola: PropTypes.string
};
Exportar predeterminado Hola;

Esta fue la estructura general del proyecto:

¿Entonces, Cual fue el problema?

Como puede ver, configuré el entorno, ESLinting, etc. Creé todo para poder comenzar a codificar y agregar mis nuevos componentes a mi brillante biblioteca de componentes nuevos.

¿Pero qué pasa si tengo un error? Vamos a arruinar algo.

Si intentamos rastrear el origen del error desde nuestra consola del navegador Google Chrome, esto será muy difícil para nosotros. Nos topamos con algo como esto:

¡Los mapas fuente no están configurados!

Quiero que apunte a un archivo Hello.js y no a un archivo incluido, como lo hizo este tipo aquí.

Esto es probablemente una cosita pequeña

O eso pensé. Así que intenté configurar los mapas de origen como se describe en los documentos agregando devtool.

Cuando webpack incluye su código fuente, puede ser difícil rastrear errores y advertencias hasta su ubicación original. Por ejemplo, si agrupa tres archivos fuente (a.js, b.js y c.js) en un paquete (bundle.js) y uno de los archivos fuente contiene un error, el seguimiento de la pila simplemente apuntará a paquete. js. Esto no siempre es útil, ya que probablemente desee saber exactamente de qué archivo de origen proviene el error.
Para que sea más fácil rastrear errores y advertencias, JavaScript ofrece mapas fuente, que mapean su código compilado a su código fuente original. Si un error se origina en b.js, el mapa fuente le dirá exactamente eso. (Fuente)

Así que ingenuamente asumí que esto funcionaría en mi webpack.config.js:

...
module.exports = {
  entrada: {main: './src/index.js'},
  salida: {
    ruta: ruta.resolver (__ dirname, 'dist'),
    nombre de archivo: '[nombre]. [chunkhash] .js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    caliente: cierto
    abierto: verdadero
  },
  ...

y package.json

...
"guiones": {
  "build": "paquete web - producción en modo",
  "dev": "webpack-dev-server - desarrollo de modo"
}
...

Debes agregar un indicador de desarrollo al hacerlo, de lo contrario no funcionará como dicen los documentos. Sin embargo, incluso con el valor sugerido, el mapa fuente no actuó como yo quería.

Si lee esta guía de SurviveJS, que debería, verá.

Después de probar todas las opciones, recurrí a la búsqueda de problemas de GitHub.

Caza de problemas de GitHub

Intentar todas las sugerencias en los problemas de GitHub no me ayudó.

En algún momento pensé que algo andaba mal con webpack-dev-server. Y resultó que el servidor webpack-dev-server ha estado en modo de mantenimiento durante algunos meses ya.

Descubrí que después de tropezar con este problema, me recomiendan usar webpack-serve en lugar de webpack-dev-server.

Honestamente, esa fue la primera vez que escuché sobre una alternativa llamada webpack-serve. Los documentos tampoco parecían prometedores. Pero aún así decidí darle una oportunidad.

npm install webpack-serve --save-dev

Creé serve.config.js

const serve = require ('webpack-serve');
const config = require ('./ webpack.config.js');
servir ({config});

Reemplacé webpack-dev-server con webpack serve en mi package.json.

Pero probar webpack-serve tampoco lo resolvió.

Entonces, en este punto, sentí que había usado todas las sugerencias que pude encontrar en GitHub:

  • Webpack 4 - Sourcemaps: este problema sugiere que devtool: 'source-map' debería funcionar de inmediato, pero este no fue el caso para mí
  • cómo hacer el mapa fuente de webpack a los archivos originales: agregar devtoolModuleFilenameTemplate: info => 'file: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/') a mi configuración de salida no ayudó mucho. Pero en lugar de client.js, me mostró index.js.
  • https://github.com/webpack/webpack/issues/6400: esta no es una descripción precisa de mi problema, por lo que probar los métodos aquí no pareció ayudarme
  • Traté de usar webpack.SourceMapDevToolPlugin pero no funcionó con mi configuración, incluso cuando eliminé devtools o las configuré como falsas
  • No utilicé el complemento UglifyJS aquí, por lo que configurar las opciones para él no fue una solución
  • Sé que webpack-dev-server está en mantenimiento ahora, así que probé webpack-serve, pero parecía que los mapas fuente tampoco funcionan con él
  • También probé el paquete source-map-support, pero no tuve suerte. Tengo una situación similar a la que se ve aquí.

La pila sagrada

Me llevó una eternidad configurar los mapas de origen, así que creé un problema en StackOverflow.

La depuración de la configuración del paquete web suele ser una tarea engorrosa: la mejor manera de hacerlo es crear una configuración desde cero. Si algo de la documentación no funciona como se esperaba, puede ser una buena idea tratar de encontrar un problema similar en una sucursal o crear su propio problema. Pensé que sí, de todos modos.

El primer tipo que respondió a mi problema realmente estaba tratando de ayudar. Compartió su propia configuración de trabajo. Incluso me ayudó al crear una solicitud de extracción.

El único problema aquí: ¿por qué funciona su configuración? Quiero decir, esto probablemente no sea mágico, y hay cierta incompatibilidad de módulos allí. Lamentablemente, no pude entender por qué mi configuración no funcionaba:

Lo que pasa es que lo hizo con las mejores intenciones al reestructurar el proyecto a su manera.

Esto significaba que tendría algo más de configuración en el proyecto y tendría que cambiar algunas cosas. Eso podría haber estado bien si estuviera haciendo una configuración de prueba, pero decidí hacer los cambios graduales en los archivos para ver dónde se estaba rompiendo.

Diseccionando el tema

Así que echemos un vistazo a las diferencias entre su Webpack y package.json y el mío. Solo para el registro, utilicé un repositorio diferente en la pregunta, así que aquí está mi enlace al repositorio y mi configuración.

// webpack v4.6.0
const path = require ('ruta');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
const stylish = require ('eslint / lib / formatters / stylish');
const webpack = require ('webpack');
module.exports = {
  entrada: {main: './src/index.js'},
  salida: {
   devtoolModuleFilenameTemplate: info => 'file: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/'),
   ruta: ruta.resolver (__ dirname, 'dist'),
   nombre de archivo: '[nombre]. [hash] .js'
  },
  modo: 'desarrollo',
  devtool: 'eval-cheap-module-source-map',
  devServer: {
    contentBase: './dist',
    caliente: cierto
  },
  módulo: {
    reglas: [
      {
        prueba: /\.js$/,
        excluir: / node_modules /,
        cargador: 'babel-loader'
      },
      {
        prueba: /\.js$/,
        excluir: / node_modules /,
        cargador: 'eslint-loader',
        opciones: {
          formateador: elegante
         }
       }
     ]
   },
   complementos: [
    // nuevo webpack.SourceMapDevToolPlugin ({
    // nombre de archivo: '[archivo] .map',
    // moduleFilenameTemplate: undefined,
    // fallbackModuleFilenameTemplate: undefined,
    // agregar: nulo,
    // módulo: verdadero,
    // columnas: verdadero,
    // lineToLine: false,
    // noSources: false,
    // espacio de nombres: ''
    //}),
    nuevo CleanWebpackPlugin ('dist', {}),
    nuevo HtmlWebpackPlugin ({
      inyectar: ​​falso
      hash: cierto
      plantilla: './src/index.html',
      nombre de archivo: 'index.html'
    }),
    nuevo WebpackMd5Hash (),
    // new webpack.NamedModulesPlugin (),
    nuevo webpack.HotModuleReplacementPlugin ()
  ]
};

package.json

{
"nombre": "publicación",
"versión": "1.0.0",
"descripción": "",
"main": "index.js",
"guiones": {
  "storybook": "start-storybook -p 9001 -c .storybook",
  "dev": "webpack-dev-server --mode development --open",
  "build": "paquete web - producción en modo"
},
"autor": "",
"licencia": "ISC",
"devDependencies": {
  "@ storybook / addon-actions": "^ 3.4.3",
  "@ storybook / react": "v4.0.0-alpha.4",
  "babel-cli": "^ 6.26.0",
  "babel-core": "^ 6.26.0",
  "babel-loader": "^ 7.1.4",
  "babel-preset-env": "^ 1.6.1",
  "babel-preset-react": "^ 6.24.1",
  "babel-runtime": "^ 6.26.0",
  "clean-webpack-plugin": "^ 0.1.19",
  "eslint": "^ 4.19.1",
  "eslint-config-prettier": "^ 2.9.0",
  "eslint-loader": "^ 2.0.0",
  "eslint-plugin-prettier": "^ 2.6.0",
  "eslint-plugin-react": "^ 7.7.0",
  "html-webpack-plugin": "^ 3.2.0",
  "más bonita": "^ 1.12.1",
  "reaccionar": "^ 16.3.2",
  "react-dom": "^ 16.3.2",
  "webpack": "v4.6.0",
  "webpack-cli": "^ 2.0.13",
  "webpack-dev-server": "v3.1.3",
  "webpack-md5-hash": "0.0.6",
  "webpack-serve": "^ 0.3.1"
},
"dependencias": {
  "source-map-support": "^ 0.5.5"
}
}

Los dejé intactos a propósito para que pueda ver mis intentos de depuración. Todo funcionó excepto los mapas de origen. A continuación, compartiré lo que cambió en mi configuración, pero, por supuesto, es mejor verificar la solicitud de extracción completa aquí.

 // webpack v4.6.0
 const path = require ('ruta');
 const HtmlWebpackPlugin = require ('html-webpack-plugin');
 // eliminar este módulo de la configuración
-const WebpackMd5Hash = require ('webpack-md5-hash');
 const CleanWebpackPlugin = require ('clean-webpack-plugin');
 const stylish = require ('eslint / lib / formatters / stylish');
 const webpack = require ('webpack');
 
 module.exports = {
  // agregando la configuración del modo aquí en lugar de una bandera
modo +: 'desarrollo',
   entrada: {main: './src/index.js'},
   salida: {
  // eliminar la ruta y la plantilla de la salida
- devtoolModuleFilenameTemplate: info =>
- 'file: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/'),
- ruta: ruta.resolve (__ dirname, 'dist'),
     nombre de archivo: '[nombre]. [hash] .js'
   },
  // agregando la opción de resolver aquí
+ resolver: {
+ extensiones: ['.js', '.jsx']
+},
   // cambiando la opción devtool
   devtool: 'eval-cheap-module-source-map',
  // cambiar la configuración de devServer
   devServer: {
- contentBase: './dist',
- caliente: cierto
+ hot: cierto,
+ abierto: verdadero
   },
   módulo: {
     reglas: [
    // poniendo mis dos cheques en uno (luego me pidió en el chat que elimine la opción eslint por completo)
       {
- prueba: /\.js$/,
- excluir: / node_modules /,
- cargador: 'babel-loader'
-},
- {
- prueba: /\.js$/,
+ prueba: /\.jsx?$/,
         excluir: / node_modules /,
- cargador: 'eslint-loader',
- opciones: {
- formateador: elegante
-}
+ uso: [
+ {loader: 'babel-loader'},
+ {loader: 'eslint-loader', opciones: {formateador: elegante}}
+]
       }
     ]
   },
   complementos: [
    // limpiado algunas opciones
- nuevo CleanWebpackPlugin ('dist', {}),
+ nuevo CleanWebpackPlugin ('dist'),
    // eliminó algunas configuraciones de HTMLWebpackPlugin
     nuevo HtmlWebpackPlugin ({
- inyectar: ​​falso,
- hash: cierto,
- plantilla: './src/index.html',
- nombre de archivo: 'index.html'
+ plantilla: './src/index.html'
     }),
  // eliminé completamente el complemento de hashing y agregué uno de reemplazo de módulo activo
- nuevo WebpackMd5Hash (),
- nuevo webpack.NamedModulesPlugin (),
+ nuevo webpack.HotModuleReplacementPlugin ()
   ]
 };

package.json

"main": "index.js",
   "guiones": {
     "storybook": "start-storybook -p 9001 -c .storybook",
  // se agregaron diferentes banderas para webpack-dev-server
- "dev": "webpack-dev-server --mode development --open",
+ "dev": "webpack-dev-server --config ./webpack.config.js",
     "build": "paquete web - producción en modo"
   },
   "autor": "",
@@ -31,11 +31,6 @@
     "react-dom": "^ 16.3.2",
     "webpack": "v4.6.0",
     "webpack-cli": "^ 2.0.13",
- "webpack-dev-server": "v3.1.3",
- "webpack-md5-hash": "0.0.6",
- "webpack-serve": "^ 0.3.1"
-},
- "dependencias": {
// movió el servidor de desarrollo a dependencias
- "source-map-support": "^ 0.5.5"
+ "webpack-dev-server": "v3.1.3"
   }
 }

Como puede ver, eliminó un montón de módulos y agregó el modo dentro de la configuración. Y al echar un vistazo a la solicitud de extracción, puede ver que también agregó algunos HMR específicos orientados a la reacción.

Esto ayudó a que los mapas fuente funcionen al sacrificar muchos complementos, pero no hubo una explicación concreta de por qué hizo lo que hizo. Como persona que lee los documentos, esto no fue muy satisfactorio para mí.

Más tarde, tomé mi webpack.connfig.js inicial y comencé a agregar los cambios paso a paso para ver cuándo los mapas de origen finalmente comenzaron a funcionar.

Cambio 1:

- nuevo CleanWebpackPlugin ('dist', {}),
+ nuevo CleanWebpackPlugin ('dist'),

Cambio 2:

Agregué webpack-dev-server a las dependencias, no devDependencies:

...
},
"dependencias": {
  "webpack-dev-server": "^ 3.1.3"
}
}
...

Cambio 3:

A continuación, eliminé algunas configuraciones de devServer:

devServer: {
- contentBase: './dist',
+ hot: cierto,
+ abierto: verdadero
   },

Cambio 4:

Eliminemos con estilo:

...
},
devtool: 'inline-source-map',
  devServer: {
    caliente: cierto
    abierto: verdadero
  },
...
utilizar: [
  {cargador: 'babel-loader'},
  {
    cargador: 'eslint-loader'
  }
]
....

Cambio 5:

Intentemos eliminar el complemento de hash WebpackMd5Hash ahora:

...
module.exports = {
modo: 'desarrollo',
entrada: {main: './src/index.js'},
salida: {
  ruta: ruta.resolver (__ dirname, 'dist'),
  nombre de archivo: '[nombre] .js'
  },
devtool: 'inline-source-map',
...
complementos: [
  nuevo CleanWebpackPlugin ('dist'),
  nuevo HtmlWebpackPlugin ({
    inyectar: ​​falso
    hash: cierto
    plantilla: './src/index.html',
    nombre de archivo: 'index.html'
  })
- nuevo WebpackMd5Hash (),
 ]
};

Cambio 6:

Ahora intentemos eliminar algunas configuraciones de HtmlWebpackPlugin:

...
complementos: [
  nuevo CleanWebpackPlugin ('dist'),
  nuevo HtmlWebpackPlugin ({
    plantilla: './src/index.html'
  })
]};
...

Cambio 7:

Como podemos ver en su código, agregó algunas opciones de resolución aquí. Personalmente no entiendo por qué los necesitamos aquí. Y tampoco pude encontrar la información en los documentos.

...
resolver: {
  extensiones: ['.js', '.jsx']
},
módulo: {
...

Cambio 8:

Eliminar ruta de salida:

...
entrada: {main: './src/index.js'},
salida: {
  nombre de archivo: '[nombre] .js'
},
devtool: 'inline-source-map',
...

Cambio 9:

Agregar el complemento de reemplazo del módulo activo:

...
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
const webpack = require ('webpack');
...
complementos: [
  nuevo CleanWebpackPlugin ('dist'),
  nuevo HtmlWebpackPlugin ({
    plantilla: './src/index.html'
  }),
  nuevo webpack.HotModuleReplacementPlugin ()
]
};
...

Cambio 10:

Agregar - config a package.json:

- "dev": "webpack-dev-server --mode development --open",
+ "dev": "webpack-dev-server --config ./webpack.config.js",

Dejemos algo claro: en este punto casi había reescrito la configuración.

¡Este es un problema enorme, ya que no podemos reescribirlo cada vez que algo no funciona!

Crear-reaccionar-aplicación en la mejor fuente para aprender sobre webpack

Como último recurso, fui a verificar cómo create-react-app implementa el mapeo de origen. Esa fue la decisión correcta después de todo. Esta es la configuración de la versión de desarrollo webpack.

Si comprobamos cómo se implementa devtool allí, veremos:

// Es posible que desee "evaluar" en su lugar si prefiere ver el resultado compilado en DevTools.
// Vea la discusión en https://github.com/facebook/create-react-app/issues/343.
devtool: ‘cheap-module-source-map’

Entonces, este problema me señaló a otro problema, que se encuentra aquí.

// webpack v4
const path = require ('ruta');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
module.exports = {
modo: "desarrollo",
entrada: {main: './src/index.js'},
salida: {
  ruta: ruta.resolver (__ dirname, 'dist'),
  nombre de archivo: '[nombre]. [hash] .js'
},
devtool: 'mapa-fuente-módulo-barato',
devServer: {
  contentBase: './dist',
  caliente: cierto
  abierto: verdadero
},
módulo: {

Cambiar las líneas todavía no funcionaba, ¡todavía! Aprendí que el mapa fuente es un problema pendiente.

Pregunta a las personas adecuadas

Cada proyecto de código abierto tiene mantenedores. Entonces, en este caso, definitivamente fue el movimiento correcto preguntarles a los chicos de inmediato.

Aunque el método de prueba y error de Daniel realmente no funcionó para mí, me sorprendió gratamente lo móvil que era el equipo de mantenimiento.

Así que creé un repositorio con la configuración que puedes ver aquí. Echa un vistazo a la segunda confirmación allí.

Para hacerlo más fácil, aquí está mi proyecto webpack.js donde volví a mi configuración inicial más limpia:

// webpack v4
const path = require ('ruta');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
module.exports = {
  modo: 'desarrollo',
  entrada: {main: './src/index.js'},
  salida: {
    ruta: ruta.resolver (__ dirname, 'dist'),
    nombre de archivo: '[nombre]. [hash] .js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    caliente: cierto
    abierto: verdadero
  },
  módulo: {
    reglas: [
      {
        prueba: /\.js$/,
        excluir: / node_modules /,
        utilizar: [
          {cargador: 'babel-loader'},
          {
            cargador: 'eslint-loader',
            opciones: {
              formateador: require ('eslint / lib / formateadores / elegante')
            }
          }
         ]
        }
      ]
  },
  complementos: [
    nuevo CleanWebpackPlugin ('dist'),
    nuevo HtmlWebpackPlugin ({
      inyectar: ​​falso
      hash: cierto
      plantilla: './src/index.html',
      nombre de archivo: 'index.html'
    }),
    nuevo WebpackMd5Hash ()
  ]
};

Después de verificar mi código, el responsable creó un problema.

Recapitulemos lo que incluyó allí:

Configurar la opción de modo
El primer problema que encontré es cómo se configuró la opción de modo. En los scripts npm, el modo se estableció como:
webpack - producción en modo
La forma correcta sería:
webpack --mode = producción
El estado final de los scripts npm me parece así:
"guiones": {
 "build": "webpack --mode = production",
 "start": "webpack-dev-server --mode = development --hot"
}
También cambié el desarrollo para comenzar, ya que es más estándar y esperado de otros desarrolladores como un comando. En realidad, puede hacer npm start, sin el comando de ejecución
...
"guiones": {
  "build": "paquete web - producción en modo",
  "dev": "webpack-dev-server --mode = desarrollo --hot"
},
...

Luego sugirió lo siguiente:

devtool para mapas fuente
Siempre recomiendo la opción inline-source-map, es la más sencilla y se incluye en el paquete en sí como un comentario al final.
module.exports = {
+ devtool: 'inline-source-map',
 // resto de tu configuración
}
También recomiendo crear un objeto separado y completar esto solo en el desarrollo:
mando
webpack-dev-server --mode = desarrollo NODE_ENV = desarrollo
webpack.config.js
const webpackConfig = {}
if (process.env.NODE_ENV === 'desarrollo') {
 webpackConfig.devtool = 'inline-source-map'
}
De esta manera, se asegura de que el paquete en producción no se vea afectado por esto.

Luego sugirió eliminar ESLint de los cargadores:

Linting y experiencia del desarrollador
Honestamente, eliminaría eslint como cargador, es súper spam y afecta el flujo de desarrollo. Prefiero agregar un githook precompromiso para verificar esto.
Esto es muy fácil al agregar un script como este:
"guiones": {
+ "pelusa": "eslint ./src/**/*.js"
 "build": "webpack --mode = production",
 "start": "webpack-dev-server --mode = development --hot"
}
Y luego combinándolo con husky.

y agregarlo a los scripts:

...
"guiones": {
"lint": "eslint ./src/**/*.js",
"build": "paquete web - producción en modo",
"dev": "webpack-dev-server --mode = desarrollo --hot"
},
...

Cometí un error en src / Hello.js a propósito para ver cómo funcionaban los mapas de origen esta vez.

importar Reaccionar desde 'reaccionar';
importar PropTypes desde 'prop-types';
clase Hello extiende React.Component {
  console.log (hello.world);
  render () {
    return 
{this.props.hello}
;   } } Hola.propTypes = {   hola: PropTypes.string }; Exportar predeterminado Hola;

Cómo solucioné el problema

El problema era EsLint. Pero después de especificar los modos correctamente y eliminar el eslint-loader, ¡los mapas fuente funcionaron bien!

Siguiendo el ejemplo que me dio el mantenedor, actualicé mi Webpack para:

// webpack v4
const path = require ('ruta');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
module.exports = {
  entrada: {main: './src/index.js'},
  salida: {
    ruta: ruta.resolver (__ dirname, 'dist'),
    nombre de archivo: '[nombre]. [hash] .js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    caliente: cierto
    abierto: verdadero
  },
  módulo: {
    reglas: [
     {
      prueba: /\.js$/,
      excluir: / node_modules /,
      uso: [{loader: 'babel-loader'}]
     }
    ]
  },
  complementos: [
    nuevo CleanWebpackPlugin ('dist'),
    nuevo HtmlWebpackPlugin ({
      inyectar: ​​falso
      hash: cierto
      plantilla: './src/index.html',
      nombre de archivo: 'index.html'
    }),
    nuevo WebpackMd5Hash ()
  ]
};

y mi paquete JSON para:

{
"nombre": "publicación",
"versión": "1.0.0",
"descripción": "",
"main": "index.js",
"guiones": {
  "build": "webpack --mode = production",
  "start": "NODE_ENV = desarrollo webpack-dev-server --mode = desarrollo --hot"
},
"autor": "",
"licencia": "ISC",
"devDependencies": {
  "babel-cli": "^ 6.26.0",
  "babel-core": "^ 6.26.0",
  "babel-loader": "^ 7.1.4",
  "babel-preset-env": "^ 1.6.1",
  "babel-preset-react": "^ 6.24.1",
  "babel-runtime": "^ 6.26.0",
  "clean-webpack-plugin": "^ 0.1.19",
  "eslint": "^ 4.19.1",
  "eslint-config-prettier": "^ 2.9.0",
  "eslint-loader": "^ 2.0.0",
  "eslint-plugin-prettier": "^ 2.6.0",
  "eslint-plugin-react": "^ 7.7.0",
  "html-webpack-plugin": "^ 3.2.0",
  "más bonita": "^ 1.12.1",
  "reaccionar": "^ 16.3.2",
  "react-dom": "^ 16.3.2",
  "webpack": "^ 4.6.0",
  "webpack-cli": "^ 2.0.13",
  "webpack-md5-hash": "0.0.6"
},
"dependencias": {
  "webpack-dev-server": "^ 3.1.3"
}
}

¡Finalmente los mapas fuente funcionaron!

Conclusiones:

Los mapas fuente han sido objeto de múltiples discusiones y errores desde 2016, como puede ver aquí.

¡Webapack necesita ayuda con la auditoría!

Después de encontrar este error, envié un problema al paquete del cargador ESLint.

Cuando se trata de verificar la calidad de los mapas de origen, podemos usar esta herramienta.

¿Qué puede hacer si tiene un problema de paquete web?

En caso de que encuentre un problema con Webpack, ¡no se asuste! Sigue estos pasos:

  • Busque en los problemas de GitHub similares a los suyos.
  • Intente verificar las repeticiones y ver cómo se implementa la característica allí, como create-react-app, por ejemplo.
  • Haga preguntas en StackOverflow, ¡no se asuste! Sin embargo, asegúrese de haberse quedado sin formas de resolver su problema por su cuenta.
  • No dudes en tuitear al respecto y preguntar a los encargados directamente.
  • Crea problemas una vez que los encuentres. ¡Esto ayudará mucho a los contribuyentes!

En este artículo, le proporcioné mi archivo de configuración y el proceso que usé para configurarlo paso a paso.

Nota: dado que muchas dependencias npm pueden cambiar para cuando lea esto, ¡la misma configuración podría no funcionar para usted! Le pido amablemente que deje sus errores en los comentarios a continuación para poder editarlos más tarde.

¡Suscríbete y aplaude por este artículo! ¡Gracias!