Tu serais pas en train de tout simplement traduire la documentation là ?Démasqué. En réalité, je ne sais pas comment expliquer ça mieux que ce que la doc dit elle-même :p.
Les plugins, à contrario des loaders qui se mettent dans un objet "module", se mettent dans un tableau nommé "plugins". Il faut importer le plugin en amont puis l'instance dans ce tableau.
Voyons tout de suite le cas d'ESLint. ESLint est un Linter, c'est à dire un outil qui va nous aider à débuguer notre code JS et à respecter les bonnes pratiques.
Il faudrait bien que j'utilise ça dans mes prochains projets ! Alors justement, voyons son installation.
Quand on regarde la documentation (eslint-webpack-plugin), on voit qu'il est recommandé d'utiliser un plugin et non plus un loader pour ESLint.
Pour l'installer :
{"language":"shell","content":"npm install eslint-webpack-plugin eslint --save-dev","filename":""}
Ensuite, on va l'instancier dans webpack :
{"language":"text/javascript","content":"const path = require('path')\nconst ESLintPlugin = require('eslint-webpack-plugin');\n\nmodule.exports = {\n mode: 'development',\n entry: {\n app:'./src/app.js', \n },\n output: {\n filename:'[name].bundle.js',\n path: path.resolve(__dirname, 'public')\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel-loader\",\n options: {\n presets: ['@babel/preset-env']\n }\n }\n }\n ]\n },\n plugins: [new ESLintPlugin(options)]\n}","filename":"webpack.config.js"}
Mais c'est quoi le paramètre "options" ? De la même manière que Babel, tu peux passer des paramètres à ESLint (tu retrouveras tous les paramètres de configuration possible sur la doc d'ESLint). Il faut alors définir un objet qui contient ces options, qu'on nomme "options" en général et qu'on passe au constructeur d'ESLint. Dans notre cas, on va pouvoir enlever ce paramètre pour qu'ESLint prenne les paramètres de base. Par contre, il faut créer un fichier de configuration de ESLint via la commande :
{"language":"shell","content":"npx eslint --init","filename":""}
Réponds aux questions qu'il te pose (on veut utiliser ESLint pour trouver les bugs, on n'utilise pas de framework, pas typescript, et on veut une sortie en JSON par exemple).
Et maintenant, on peut lancer npm run build.
Rien n'a changé par rapport à d'habitude...Tout à fait. Mais maintenant, introduis une erreur dans ton fichier app.js. Par exemple "let a = b". Relance npm run build...
Une erreur s'affiche ! Avec une explication de l'erreur.En effet ! C'est ESLint qui affiche ça. Si tu enlèves le plugin et que tu relances npm run build, dans ce cas aucune erreur ne va s'afficher dans le terminal.
Tu as compris ?
Tout à fait.Super. Alors maintenant, passons à un dernier point : webpack-dev-server J'ai terminé cette partie