Come ho risolto ed eseguito il debug del mio problema Webpack attraverso tentativi, errori e un piccolo aiuto esterno.

Vedi l'originale su: https://www.instagram.com/p/BdCxrMcn-k5/?taken-by=riittagirl

Direi che è stato un bel viaggio. Sapevo che il Webpack non era facile da configurare: ci sono molte parti con molte opzioni, c'è npm inferno e cambiano con le nuove versioni. Non c'è da meravigliarsi se può facilmente diventare un compito fastidioso eseguire il debug quando qualcosa non va come previsto (cioè non come nei documenti).

Prova di eseguire il debug

Il mio percorso di debug è iniziato con la seguente configurazione:

webpack.config.js

// webpack v4.6.0
const path = require ('percorso');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
const webpack = require ('webpack');
module.exports = {
  voce: {main: './src/index.js'},
  produzione: {
    percorso: path.resolve (__ dirname, 'dist'),
    nome file: '[nome]. [chunkhash] .js'
  },
  devServer: {
    contentBase: './dist',
    caldo: vero,
    aperto: vero
  },
  modulo: {
    regole: [
      {
        test: /\.js$/,
        escludi: / node_modules /,
        uso: [
          {loader: 'babel-loader'},
          {
            loader: 'eslint-loader',
            opzioni: {
              formatter: richiedono ('eslint / lib / formatters / stylish')
            }
           }
         ]
       }
     ]
  },
  plugin: [
    nuovo CleanWebpackPlugin ('dist', {}),
    nuovo HtmlWebpackPlugin ({
      iniettare: falso,
      hash: true,
      modello: './src/index.html',
      nome file: 'index.html'
    }),
    nuovo WebpackMd5Hash ()
  ]
};

package.json

{
  "name": "post",
  "versione": "1.0.0",
  "descrizione": "",
  "main": "index.js",
  "script": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server"
   },
  "autore": "",
  "licenza": "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-reazioni": "^ 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-reazioni": "^ 7.7.0",
    "html-webpack-plugin": "^ 3.2.0",
    "più bello": "^ 1.12.1",
    "reagire": "^ 16.3.2",
    "reazioni-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", "reagire"]
}

.eslintrc.js

module.exports = {
  env: {
    browser: vero,
    commonjs: true,
    es6: vero
  },
  si estende: [
    'Eslint: consigliata',
    'Plugin: reagire / consigliato',
    'Più bella',
    'Plugin: più bella / consigliato'
  ],
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      jsx: true
    },
    sourceType: 'module'
  },
  plugin: ['reagire', 'più bello'],
  regole: {
    trattino: ["errore", 2],
    'linebreak-style': ['error', 'unix'],
    virgolette: ['warn', 'single'],
    semi: ['errore', 'sempre'],
    "no-unused-vars": [
      'avvisare',
      {vars: 'all', args: 'none', ignoreRestSiblings: false}
    ],
    'più bello / più bello': 'errore'
   }
};

prettier.config.js

// .prettierrc.js
module.exports = {
  printWidth: 80,
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  bracketSpacing: true
};

E nella cartella src /:

index.html


  
 
    
      

index.js

import React da 'reagire';
importare {render} da 'reazioni-dom';
import Hello da './Hello';
class App estende React.Component {
  render () {
    ritorno (
      
                   );   } } render (, document.getElementById ('app'));

Hello.js

import React da 'reagire';
importare PropTypes da 'prop-types';
la classe Hello estende React.Component {
  render () {
    return 
{this.props.hello}
;   } }
Hello.propTypes = {
  ciao: PropTypes.string
};
esportazione predefinita Hello;

Questa era la struttura complessiva del progetto:

Allora, qual è il problema?

Come puoi vedere, ho impostato l'ambiente, ESLinting e così via. Ho creato tutto in modo da poter iniziare a scrivere codice e aggiungere i miei nuovi componenti alla mia nuova brillante libreria di componenti.

E se avessi un errore? Andiamo a rovinare qualcosa.

Se proviamo a rintracciare l'origine dell'errore dalla nostra console del browser Google Chrome, questo sarà molto difficile per noi. Ci imbattiamo in qualcosa del genere:

Le mappe di origine non sono configurate!

Voglio che indichi un file Hello.js e non un file raggruppato, un po 'come ha fatto questo ragazzo qui.

Questa è probabilmente una cosa minuscola

O almeno così pensavo. Quindi ho provato a impostare le mappe di origine come descritto nei documenti aggiungendo devtool.

Quando il webpack raggruppa il codice sorgente, può essere difficile rintracciare errori e avvisi nella posizione originale. Ad esempio, se si raggruppano tre file di origine (a.js, b.js e c.js) in un pacchetto (bundle.js) e uno dei file di origine contiene un errore, la traccia dello stack punterà semplicemente al pacchetto. js. Questo non è sempre utile in quanto probabilmente vuoi sapere esattamente da quale file sorgente proviene l'errore.
Per facilitare la ricerca di errori e avvisi, JavaScript offre mappe di origine, che associano il codice compilato al codice sorgente originale. Se un errore proviene da b.js, la mappa di origine ti dirà esattamente questo. (Fonte)

Quindi ho ingenuamente supposto che avrebbe funzionato nel mio webpack.config.js:

...
module.exports = {
  voce: {main: './src/index.js'},
  produzione: {
    percorso: path.resolve (__ dirname, 'dist'),
    nome file: '[nome]. [chunkhash] .js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    caldo: vero,
    aperto: vero
  },
  ...

e package.json

...
"script": {
  "build": "webpack --mode production",
  "dev": "webpack-dev-server --mode development"
}
...

Devi aggiungere un flag di sviluppo quando lo fai, altrimenti non funzionerà come dicono i documenti. Tuttavia, anche con il valore suggerito, la mappa di origine non ha funzionato come volevo.

Se leggi questa guida di SurviveJS, che dovresti, vedrai.

Dopo aver provato tutte le opzioni, ho fatto ricorso alla caccia al problema di GitHub.

Caccia al problema di GitHub

Provare tutti i suggerimenti nei problemi di GitHub non mi ha aiutato.

Ad un certo punto ho pensato che qualcosa non andasse con webpack-dev-server. E si è scoperto che il webpack-dev-server è già in modalità manutenzione da alcuni mesi.

Ho scoperto che dopo essermi imbattuto in questo problema in cui raccomandano di utilizzare webpack-serve invece di webpack-dev-server.

Onestamente, è stata la prima volta che ho sentito parlare di un'alternativa chiamata webpack-serve. Nemmeno i documenti sembravano promettenti. Ma ho ancora deciso di provarci.

npm install webpack-serve --save-dev

Ho creato serve.config.js

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

Ho sostituito webpack-dev-server con il servizio webpack nel mio pacchetto.json.

Ma neanche provare il webpack-serve.

Quindi a questo punto mi sono sentito come se avessi usato tutti i suggerimenti che ho trovato su GitHub:

  • Webpack 4 - Sourcemaps: questo problema suggerisce che devtool: 'source-map' dovrebbe funzionare fuori dagli schemi, ma non è stato il caso per me
  • come rendere la webmap del webpack ai file originali: l'aggiunta di devtoolModuleFilenameTemplate: info => 'file: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/') alla mia configurazione di output non ha aiutato tanto. Ma invece di client.js, mi ha mostrato index.js.
  • https://github.com/webpack/webpack/issues/6400: questa non è una descrizione accurata del mio problema, quindi provare i metodi qui non mi sembra aiutarmi
  • Ho provato a utilizzare webpack.SourceMapDevToolPlugin ma non ha funzionato con la mia configurazione, anche quando ho eliminato devtools o impostato su false
  • Non ho usato il plugin UglifyJS qui, quindi impostare le opzioni per esso non era una soluzione
  • So che webpack-dev-server è ora in manutenzione, quindi ho provato webpack-serve, ma sembrava che le mappe di origine non funzionassero nemmeno con esso
  • Ho provato anche il pacchetto di supporto della mappa sorgente, ma non ho avuto fortuna. Ho una situazione simile a quella vista qui.

The Holy StackOverflow

Mi ci è voluta un'eternità per configurare le mappe di origine, quindi ho creato un problema su StackOverflow.

Il debugging della configurazione del webpack è di solito un'operazione complicata: il modo migliore per farlo è creare una configurazione da zero. Se qualcosa dalla documentazione non funziona come previsto, potrebbe essere una buona idea provare a trovare un problema simile su un ramo o creare il proprio problema. L'ho pensato comunque.

Il primo che ha risposto al mio problema stava davvero cercando di aiutare. Ha condiviso la sua configurazione di lavoro. Mi ha anche aiutato creando una richiesta pull.

L'unico problema qui: perché la sua installazione funziona? Voglio dire, questo probabilmente non è magico, e c'è qualche incompatibilità del modulo lì. Purtroppo, non riuscivo a capire perché la mia installazione non funzionasse:

Il fatto è che lo ha fatto con le migliori intenzioni ristrutturando il progetto a modo suo.

Ciò significava che avrei avuto un po 'più di installazione nel progetto e avrei dovuto cambiare alcune cose. Sarebbe potuto andar bene se stavo facendo una configurazione di prova, ma ho deciso di fare le modifiche graduali ai file per vedere dove si stava rompendo.

Analizzare il problema

Quindi diamo un'occhiata alle differenze tra il suo Webpack e package.json e il mio. Per la cronaca, ho usato un repository diverso nella domanda, quindi ecco il mio link al repository e la mia configurazione.

// webpack v4.6.0
const path = require ('percorso');
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 = {
  voce: {main: './src/index.js'},
  produzione: {
   devtoolModuleFilenameTemplate: info => 'file: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/'),
   percorso: path.resolve (__ dirname, 'dist'),
   nome file: '[nome]. [hash] .js'
  },
  modalità: "sviluppo",
  devtool: 'eval-cheap-module-source-map',
  devServer: {
    contentBase: './dist',
    caldo: vero
  },
  modulo: {
    regole: [
      {
        test: /\.js$/,
        escludi: / node_modules /,
        caricatore: 'babel-loader'
      },
      {
        test: /\.js$/,
        escludi: / node_modules /,
        loader: 'eslint-loader',
        opzioni: {
          formatter: elegante
         }
       }
     ]
   },
   plugin: [
    // nuovo webpack.SourceMapDevToolPlugin ({
    // nomefile: '[file] .map',
    // moduleFilenameTemplate: undefined,
    // fallbackModuleFilenameTemplate: undefined,
    // append: null,
    // module: true,
    // colonne: vero,
    // lineToLine: false,
    // noSources: false,
    // namespace: ''
    //}),
    nuovo CleanWebpackPlugin ('dist', {}),
    nuovo HtmlWebpackPlugin ({
      iniettare: falso,
      hash: true,
      modello: './src/index.html',
      nome file: 'index.html'
    }),
    nuovo WebpackMd5Hash (),
    // new webpack.NamedModulesPlugin (),
    nuovo webpack.HotModuleReplacementPlugin ()
  ]
};

package.json

{
"name": "post",
"versione": "1.0.0",
"descrizione": "",
"main": "index.js",
"script": {
  "libro di fiabe": "start-storybook -p 9001 -c .storybook",
  "dev": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
},
"autore": "",
"licenza": "ISC",
"devDependencies": {
  "@ storybook / addon-actions": "^ 3.4.3",
  "@ storybook / reazioni": "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-reazioni": "^ 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-reazioni": "^ 7.7.0",
  "html-webpack-plugin": "^ 3.2.0",
  "più bello": "^ 1.12.1",
  "reagire": "^ 16.3.2",
  "reazioni-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"
},
"dipendenze": {
  "source-map-support": "^ 0.5.5"
}
}

Li ho lasciati intatti di proposito in modo che tu possa vedere i miei tentativi di debug. Tutto ha funzionato ad eccezione delle mappe di origine. Di seguito, condividerò ciò che è cambiato nella mia configurazione, ma è ovviamente meglio controllare qui la richiesta di pull completo.

 // webpack v4.6.0
 const path = require ('percorso');
 const HtmlWebpackPlugin = require ('html-webpack-plugin');
 // elimina questo modulo dalla configurazione
-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 = {
  // aggiungendo qui l'impostazione della modalità invece di un flag
+ modalità: 'sviluppo',
   voce: {main: './src/index.js'},
   produzione: {
  // elimina il percorso e il modello dall'output
- devtoolModuleFilenameTemplate: info =>
- 'file: //' + path.resolve (info.absoluteResourcePath) .replace (/ \\ / g, '/'),
- path: path.resolve (__ dirname, 'dist'),
     nome file: '[nome]. [hash] .js'
   },
  // aggiungendo l'opzione di risoluzione qui
+ risoluzione: {
+ estensioni: ['.js', '.jsx']
+},
   // modifica dell'opzione devtool
   devtool: 'eval-cheap-module-source-map',
  // modifica delle impostazioni di devServer
   devServer: {
- contentBase: './dist',
- caldo: vero
+ caldo: vero,
+ aperto: vero
   },
   modulo: {
     regole: [
    // mettendo i miei due assegni in uno (in seguito mi ha chiesto nella chat di eliminare completamente l'opzione eslint)
       {
- test: /\.js$/,
- exclude: / node_modules /,
- caricatore: 'babel-loader'
-},
- {
- test: /\.js$/,
+ test: /\.jsx?$/,
         escludi: / node_modules /,
- caricatore: "eslint-loader",
-        opzioni: {
- formatter: elegante
-}
+ uso: [
+ {loader: 'babel-loader'},
+ {loader: 'eslint-loader', opzioni: {formatter: stylish}}
+]
       }
     ]
   },
   plugin: [
    // ha pulito alcune opzioni
- nuovo CleanWebpackPlugin ('dist', {}),
+ nuovo CleanWebpackPlugin ('dist'),
    // ha eliminato alcune impostazioni da HTMLWebpackPlugin
     nuovo HtmlWebpackPlugin ({
- iniettare: falso,
- hash: vero,
- template: './src/index.html',
- nome file: "index.html"
+ template: './src/index.html'
     }),
  // rimuove completamente il plug-in di hashing e ne aggiunge uno sostitutivo del modulo a caldo
- nuovo WebpackMd5Hash (),
- nuovo webpack.NamedModulesPlugin (),
+ nuovo webpack.HotModuleReplacementPlugin ()
   ]
 };

package.json

"main": "index.js",
   "script": {
     "libro di fiabe": "start-storybook -p 9001 -c .storybook",
  // ha aggiunto flag diversi per webpack-dev-server
- "dev": "webpack-dev-server --mode development --open",
+ "dev": "webpack-dev-server --config ./webpack.config.js",
     "build": "webpack --mode production"
   },
   "autore": "",
@@ -31,11 +31,6 @@
     "reazioni-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"
-},
- "dipendenze": {
// ha spostato il server dev su dipendenze
- "source-map-support": "^ 0.5.5"
+ "webpack-dev-server": "v3.1.3"
   }
 }

Come puoi vedere, ha eliminato un sacco di moduli e ha aggiunto la modalità all'interno della configurazione. E dando un'occhiata alla richiesta pull, puoi vedere che ha anche aggiunto un HMR specifico orientato alla reazione.

Ciò ha aiutato le mappe di origine a funzionare sacrificando molti plugin, ma non c'erano spiegazioni concrete sul perché avesse fatto quello che aveva fatto. Come persona che legge i documenti, questo non è stato molto soddisfacente per me.

Successivamente, ho preso il mio webpack.connfig.js iniziale e ho iniziato ad aggiungere le modifiche passo dopo passo per vedere quando finalmente le mappe di origine hanno iniziato a funzionare.

Modifica 1:

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

Modifica 2:

Ho aggiunto webpack-dev-server alle dipendenze, non devDependencies:

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

Modifica 3:

Successivamente ho rimosso alcune impostazioni di devServer:

devServer: {
- contentBase: './dist',
+ caldo: vero,
+ aperto: vero
   },

Modifica 4:

Rimuoviamo l'eleganza:

...
},
devtool: 'inline-source-map',
  devServer: {
    caldo: vero,
    aperto: vero
  },
...
uso: [
  {loader: 'babel-loader'},
  {
    loader: 'eslint-loader'
  }
]
....

Modifica 5:

Proviamo a rimuovere il plug-in di hashing WebpackMd5Hash ora:

...
module.exports = {
modalità: "sviluppo",
voce: {main: './src/index.js'},
produzione: {
  percorso: path.resolve (__ dirname, 'dist'),
  nome file: '[nome] .js'
  },
devtool: 'inline-source-map',
...
plugin: [
  nuovo CleanWebpackPlugin ('dist'),
  nuovo HtmlWebpackPlugin ({
    iniettare: falso,
    hash: true,
    modello: './src/index.html',
    nome file: 'index.html'
  })
- nuovo WebpackMd5Hash (),
 ]
};

Modifica 6:

Ora proviamo a rimuovere alcune impostazioni da HtmlWebpackPlugin:

...
plugin: [
  nuovo CleanWebpackPlugin ('dist'),
  nuovo HtmlWebpackPlugin ({
    modello: './src/index.html'
  })
]};
...

Modifica 7:

Come possiamo vedere nel suo codice, ha aggiunto alcune opzioni di risoluzione qui. Personalmente non capisco perché ne abbiamo bisogno qui. E non sono riuscito a trovare nemmeno le informazioni nei documenti.

...
risolvere: {
  estensioni: ['.js', '.jsx']
},
modulo: {
...

Modifica 8:

Eliminazione del percorso di output:

...
voce: {main: './src/index.js'},
produzione: {
  nome file: '[nome] .js'
},
devtool: 'inline-source-map',
...

Modifica 9:

Aggiunta del plug-in di sostituzione del modulo attivo:

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

Modifica 10:

Aggiunta - config a package.json:

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

Cerchiamo di chiarire qualcosa: a questo punto avevo quasi riscritto la configurazione.

Questo è un grosso problema, dal momento che non possiamo semplicemente riscriverlo ogni volta che qualcosa non funziona!

Crea-reagire-app nella migliore fonte per conoscere il webpack

Come ultima risorsa, sono andato a verificare come create-reply-app implementa la mappatura di origine. Questa è stata la decisione giusta dopo tutto. Questa è la configurazione della versione dev del webpack.

Se controlliamo come devtool è implementato lì, vedremo:

// Potresti volere "eval" invece se preferisci vedere l'output compilato in DevTools.
// Vedi la discussione in https://github.com/facebook/create-react-app/issues/343.
devtool: "cheap-module-source-map"

Quindi questo problema mi ha segnalato un altro problema, trovato qui.

// webpack v4
const path = require ('percorso');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
module.exports = {
modalità: "sviluppo",
voce: {main: './src/index.js'},
produzione: {
  percorso: path.resolve (__ dirname, 'dist'),
  nome file: '[nome]. [hash] .js'
},
devtool: 'cheap-module-source-map',
devServer: {
  contentBase: './dist',
  caldo: vero,
  aperto: vero
},
modulo: {

Cambiare le linee non funzionava ancora - ancora! Ho imparato che la mappa delle fonti è un problema di vecchia data.

Chiedi alle persone giuste

Ogni progetto open source ha manutentori. Quindi, in questo caso, è stata sicuramente la mossa giusta per chiedere subito ai ragazzi.

Sebbene il metodo di prova ed errore di Daniel non abbia funzionato davvero per me, sono stato piacevolmente sorpreso da quanto fosse mobile il team del manutentore.

Quindi ho creato un repository con l'impostazione che puoi vedere qui. Dai un'occhiata al secondo commit lì.

Per semplificarti, ecco il mio progetto webpack.js in cui sono tornato alla mia configurazione iniziale più pulita:

// webpack v4
const path = require ('percorso');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
module.exports = {
  modalità: "sviluppo",
  voce: {main: './src/index.js'},
  produzione: {
    percorso: path.resolve (__ dirname, 'dist'),
    nome file: '[nome]. [hash] .js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    caldo: vero,
    aperto: vero
  },
  modulo: {
    regole: [
      {
        test: /\.js$/,
        escludi: / node_modules /,
        uso: [
          {loader: 'babel-loader'},
          {
            loader: 'eslint-loader',
            opzioni: {
              formatter: richiedono ('eslint / lib / formatters / stylish')
            }
          }
         ]
        }
      ]
  },
  plugin: [
    nuovo CleanWebpackPlugin ('dist'),
    nuovo HtmlWebpackPlugin ({
      iniettare: falso,
      hash: true,
      modello: './src/index.html',
      nome file: 'index.html'
    }),
    nuovo WebpackMd5Hash ()
  ]
};

Dopo aver controllato il mio codice, il manutentore ha creato un problema.

Ricapitoliamo ciò che ha incluso lì:

Impostazione dell'opzione modalità
Il primo problema che ho riscontrato è come è stata impostata l'opzione modalità. Negli script npm la modalità era impostata come:
webpack: produzione in modalità
Il modo corretto sarebbe:
webpack --mode = produzione
Lo stato finale degli script npm è simile a questo per me:
"script": {
 "build": "webpack --mode = production",
 "start": "webpack-dev-server --mode = development --hot"
}
Ho anche cambiato dev per iniziare poiché è più standard e previsto da altri sviluppatori come comando. In realtà puoi fare npm start, senza il comando run
...
"script": {
  "build": "webpack --mode production",
  "dev": "webpack-dev-server --mode = development --hot"
},
...

Successivamente ha suggerito quanto segue:

devtool per le mappe di origine
Consiglio sempre l'opzione inline-source-map, è la più semplice ed è inclusa nel pacchetto stesso come commento alla fine di esso.
module.exports = {
+ devtool: 'inline-source-map',
 // resto della tua configurazione
}
Consiglio anche di creare un oggetto separato e di popolarlo solo durante lo sviluppo:
comando
webpack-dev-server --mode = sviluppo NODE_ENV = sviluppo
webpack.config.js
const webpackConfig = {}
if (process.env.NODE_ENV === 'sviluppo') {
 webpackConfig.devtool = 'inline-source-map'
}
In questo modo ti assicuri che il bundle sulla produzione non ne sia influenzato.

Quindi ha suggerito di rimuovere ESLint dai caricatori:

Esperienza di lanugine e sviluppo
Onestamente, eliminerei eslint come caricatore, è super-spam e incasina il flusso di sviluppo. Preferisco aggiungere un pre-test Githook per verificare questo.
È facilissimo aggiungendo uno script come questo:
"script": {
+ "lint": "eslint ./src/**/*.js"
 "build": "webpack --mode = production",
 "start": "webpack-dev-server --mode = development --hot"
}
E poi combinandolo con husky.

e aggiungendolo agli script:

...
"script": {
"lint": "eslint ./src/**/*.js",
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode = development --hot"
},
...

Ho fatto un errore in src / Hello.js di proposito per vedere come funzionavano le mappe sorgente questa volta.

import React da 'reagire';
importare PropTypes da 'prop-types';
la classe Hello estende React.Component {
  console.log (hello.world);
  render () {
    return 
{this.props.hello}
;   } } Hello.propTypes = {   ciao: PropTypes.string }; esportazione predefinita Hello;

Come ho risolto il problema

Il problema era EsLint. Ma dopo aver specificato correttamente le modalità e rimosso il caricatore eslint, le mappe sorgente hanno funzionato bene!

Seguendo l'esempio del manutentore, ho aggiornato il mio Webpack a:

// webpack v4
const path = require ('percorso');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
module.exports = {
  voce: {main: './src/index.js'},
  produzione: {
    percorso: path.resolve (__ dirname, 'dist'),
    nome file: '[nome]. [hash] .js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    caldo: vero,
    aperto: vero
  },
  modulo: {
    regole: [
     {
      test: /\.js$/,
      escludi: / node_modules /,
      use: [{loader: 'babel-loader'}]
     }
    ]
  },
  plugin: [
    nuovo CleanWebpackPlugin ('dist'),
    nuovo HtmlWebpackPlugin ({
      iniettare: falso,
      hash: true,
      modello: './src/index.html',
      nome file: 'index.html'
    }),
    nuovo WebpackMd5Hash ()
  ]
};

e il mio pacchetto JSON per:

{
"name": "post",
"versione": "1.0.0",
"descrizione": "",
"main": "index.js",
"script": {
  "build": "webpack --mode = production",
  "start": "NODE_ENV = sviluppo webpack-dev-server --mode = development --hot"
},
"autore": "",
"licenza": "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-reazioni": "^ 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-reazioni": "^ 7.7.0",
  "html-webpack-plugin": "^ 3.2.0",
  "più bello": "^ 1.12.1",
  "reagire": "^ 16.3.2",
  "reazioni-dom": "^ 16.3.2",
  "webpack": "^ 4.6.0",
  "webpack-cli": "^ 2.0.13",
  "webpack-md5-hash": "0.0.6"
},
"dipendenze": {
  "webpack-dev-server": "^ 3.1.3"
}
}

Finalmente le mappe sorgente hanno funzionato!

conclusioni:

Le mappe di origine sono state oggetto di discussioni e bug multipli dal 2016, come puoi vedere qui.

Webapack ha bisogno di aiuto con l'audit!

Dopo aver trovato questo errore, ho inviato un problema al pacchetto del caricatore ESLint.

Quando si tratta di verificare la qualità delle mappe di origine, possiamo usare questo strumento.

Cosa puoi fare in caso di problemi con il webpack?

Nel caso in cui ti imbatti in un problema con Webpack, non farti prendere dal panico! Segui questi passi:

  • Cerca nei problemi di GitHub simili ai tuoi.
  • Prova a controllare le piastre della caldaia e guarda come la funzionalità è implementata lì, come ad esempio create -eagire-app.
  • Poni domande su StackOverflow: non aver paura! Assicurati di aver esaurito i modi per risolvere il problema da solo, però.
  • Non esitate a twittarlo e chiedere direttamente ai manutentori.
  • Crea problemi una volta trovati. Questo aiuterà molto i partecipanti!

In questo articolo, ti ho fornito il mio file di configurazione e il processo che ho usato per configurarlo passo dopo passo.

Nota: poiché molte dipendenze npm potrebbero cambiare al momento della lettura, la stessa configurazione potrebbe non funzionare per te! Ti chiedo gentilmente di lasciare i tuoi errori nei commenti qui sotto in modo da poterlo modificare in seguito.

Per favore, iscriviti e clap per questo articolo! Grazie!