Utiliser et configurer Webpack simplement 1. Installer Webpack 2. Mode, points d'entrée et de sortie 3. Loaders 4. Plugins 5. Utiliser Webpack Dev Server 6. Astuces et bonnes pratiques en plus

Commentaires

Webpack dev server permet que le code soit recompilé à chaque fois qu'on change quelque chose dans notre code. Pas besoin de relancer webpack ! Mieux, il permet même de modifier directement le résultat dans le navigateur quand on change notre code. Il permet en gros de faire ce que fait "live server" de Visual Studio Code.

En premier lieu, il faut donc installer webpack dev server :

{"language":"shell","content":"npm install webpack-dev-server --save-dev","filename":""}

Ensuite, on va modifier notre configuration en rajoutant un paramètre nommé "devServer". On lui précise à minima le dossier où est notre contenu généré et notre HTML, et si on veut qu'il y ait le Hot Replacement, on rajoute hot:true :

{"language":"text/javascript","content":"const path = require('path')\nconst webpack = require('webpack')\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: [\n new ESLintPlugin(),\n ],\n devServer: {\n contentBase: path.join(__dirname, './public'),\n hot:true,\n }\n}","filename":"webpack.config.js"}

C'est quoi le hot replacement ?
Le hot replacement, c'est le terme technique qui signifie que les changements qu'on fait dans le code se répercutent directement dans la page web ;).

Arthur, l'apprenti développeur

D'accord. Donc là ça marche ?
Non, en fait là Webpack va recompiler à chaque modification sur le code mais le résultat sur la page web restera inchangé. Il faut ajouter un autre plugin : Html Webpack Plugin :

{"language":"shell","content":"npm install --save-dev html-webpack-plugin","filename":""}

Et comme pour chaque plugin, il faut l'ajouter à notre configuration dans le tableau dédié :

{"language":"text/javascript","content":"const path = require('path')\nconst webpack = require('webpack')\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\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: [\n new ESLintPlugin(),\n new HtmlWebpackPlugin({\n name:\"Un joli nom\"\n })\n ],\n devServer: {\n contentBase: path.join(__dirname, './public'),\n hot:true,\n }\n}","filename":"webpack.config.js"}

Et maintenant c'est bon ?
C'est tout bon ! Il faut par contre lancer le serveur :

{"language":"shell","content":"npx webpack serve --open","filename":""}

Et là, par magie, dans ton navigateur va s'ouvrir ton site correctement. Tente de faire des modifications dans ton fichier index.js par exemple : la page web est modifiée dès que tu enregistres ! Si ce n'est pas le cas, c'est que tu as une erreur dans ton code et ESLint te l'indique directement dans la console comme auparavant ;)

Arthur, l'apprenti développeur

C'est super pratique !
Oui ça l'est.

Arthur, l'apprenti développeur

Par contre, je me demandais : là on réutilise npx webpack.... On a vu dans le premier chapitre qu'il était mieux d'écrire un script, peut-on le faire ?
Oui, d'ailleurs la dernière partie de ce cours te présente quelques petits "trucs et astuces" pour améliorer ton utilisation de Webpack. On voit ça de suite ! J'ai terminé cette partie

Demander de l'assistance

Utiliser et configurer Webpack simplement - Utiliser Webpack Dev Server - Javascript

Modale alert