Comment j'ai résolu et débogué mon problème Webpack par le biais d'essais, d'erreurs et d'un peu d'aide extérieure.

Voir l'original à l'adresse: https://www.instagram.com/p/BdCxrMcn-k5/?taken-by=riittagirl

Je dirais que c'était un sacré voyage. Je savais que Webpack n’était pas facile à configurer: il y a beaucoup de pièces avec beaucoup d’options, c’est l’enfer npm et elles changent avec les nouvelles versions. Il n’est donc pas étonnant que le débogage devienne une tâche fastidieuse lorsque quelque chose ne se passe pas comme prévu (c’est-à-dire pas comme dans la documentation).

Essayer de déboguer

Mon parcours de débogage a commencé avec la configuration suivante:

webpack.config.js

// webpack v4.6.0
const path = require ('path');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const WebpackMd5Hash = require ('webpack-md5-hash');
const CleanWebpackPlugin = require ('clean-webpack-plugin');
const webpack = require ('webpack');
module.exports = {
  entrée: {main: './src/index.js'},
  sortie: {
    path: path.resolve (__ dirname, 'dist'),
    nom de fichier: '[nom]. [chunkhash] .js'
  },
  devServer: {
    contentBase: './dist',
    chaud: vrai,
    ouvert: vrai
  },
  module: {
    règles: [
      {
        test: /\.js$/,
        exclure: / node_modules /,
        utilisation: [
          {loader: 'babel-loader'},
          {
            loader: 'eslint-loader',
            Les options: {
              formateur: require ('eslint / lib / formateurs / stylé')
            }
           }
         ]
       }
     ]
  },
  plugins: [
    nouveau CleanWebpackPlugin ('dist', {}),
    new HtmlWebpackPlugin ({
      inject: false,
      hash: vrai,
      modèle: './src/index.html',
      nom de fichier: 'index.html'
    }),
    nouveau WebpackMd5Hash ()
  ]
};

package.json

{
  "nom": "post",
  "version": "1.0.0",
  "la description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server"
   },
  "auteur": "",
  "licence": "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",
    "plus jolie": "^ 1.12.1",
    "réagir": "^ 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", "réagir"]
}

.eslintrc.js

module.exports = {
  env: {
    navigateur: true,
    commonjs: true,
    es6: vrai
  },
  s'étend: [
    'eslint: recommandé',
    'plugin: réagir / recommandé',
    'plus jolie',
    'plugin: plus joli / recommandé'
  ],
  analyseurOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      jsx: true
    },
    sourceType: 'module'
  },
  plugins: ['react', 'plus joli'],
  règles: {
    tiret: ['erreur', 2],
    'linebreak-style': ['error', 'unix'],
    citations: ['avertir', 'célibataire'],
    semi: ['erreur', 'toujours'],
    'non-inutilisé-vars': [
      'prévenir',
      {vars: 'all', args: 'none', ignoreRestSiblings: false}
    ],
    'plus joli / plus joli': 'erreur'
   }
};

prettier.config.js

// .prettierrc.js
module.exports = {
  largeur d'impression: 80,
  tabWidth: 2,
  semi: vrai,
  singleQuote: true,
  bracketing: vrai
};

Et dans le dossier src /:

index.html