démarrer un nouveau projet 2.0/ webpack.config / babel.config.js/ package.json/ npm packages

webpack.config.js

// console
npm init -y
npm  i @babel/core @babel/cli @babel/preset-env
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install -D babel-loader @babel/core @babel/preset-env
npm install --save-dev @babel/core @babel/cli @babel/preset-env babel-loader
create folder:
src 
src add:
index.html
index.js:
let test = "123"  //test for babel/preset-env


//babel config preset-env
//create file 
// babel.config.js 

module.exports = {
    presets: [["@babel/preset-env"]]
};

// console
npm i webpack webpack-cli webpack-dev-server babel-loader
//create file:
webpack.config.js

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.resolve(__dirname, "src/index.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html")
    })
  ],
  devtool: "source-map",
  mode: "development",
  devServer: {
    contentBase: path.resolve(__dirname, "./dist"),
    inline: true,
    open: true,
    hot: true,
    port: 4000
  }
};

//console
npm i html-webpack-plugin

//maintenat on BUILD notre application ajout de script "script "
// package.json
{
  "name": "blogsimple",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack",
    "start": "webpack serve"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/olygood/blogSimple.git"
  },
  "author": "olygood",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/olygood/blogSimple/issues"
  },
  "homepage": "https://github.com/olygood/blogSimple#readme",
  "dependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.2.1",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}
// console
npm run webpack
npm start

//les dossiers
dist:
  index.html
  main.bundle.js
  main.bundle.js.map
node_modules:
src:
  index.html
  index.js
.gitignore
babel.config.js
package-lock.json
package.json
README.md
webpack.config.js

webpack_1.config.js

Création du projet
Nous repartons du projet avec la configuration de Webpack. Si vous souhaitez repartir de 0 pour vous entraîner, suivez ces étapes.

Commencez par créer le dossier de votre projet, par exemple blog-project.

Dans ce dossier, initialisez un package.json en faisant dans un terminal au niveau du dossier :

npm init
Installez ensuite les dépendances :

npm i -D @babel/cli @babel/core @babel/preset-env babel-loader css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server core-js@3 regenerator-runtime
Créez ensuite le fichier de configuration de Webpack, webpack.config.js :

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    main: path.join(__dirname, "src/index.js")
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js/,
        exclude: /(node_modules)/,
        use: ["babel-loader"]
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "./src/index.html")
    })
  ],
  stats: "minimal",
  devtool: "source-map",
  mode: "development",
  devServer: {
    open: false,
    contentBase: "./dist",
    inline: true,
    port: 4000
  }
};
Puis celui de Babel, babel.config.js :

const presets = [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        debug: true,
        corejs: 3,
        targets: "> 0.25%, not dead"
      }
    ]
  ];
  
  module.exports = { presets };
Créez le fichier .gitignore pour empêcher git de gérer certains dossiers :

node_modules
dist
Enfin, créez un dossier src dans lequel vous créez les trois fichier index.html, style.css et index.js.

Vous êtes parés !

Utilisation de Sass avec Webpack
Nous allons maintenant modifier la configuration de Webpack afin de pouvoir utiliser Sass. Allez donc dans webpack.config.js et modifiez :

…
module: {
    rules: [
      {
        test: /\.js/,
        exclude: /(node_modules)/,
        use: ["babel-loader"]
      },
      {
        test: /\.scss$/i,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },
…
Installez ensuite le loader et le compilateur qui permet de transformer le Sass en CSS :

npm install sass-loader node-sass --save-dev
Nous pouvons maintenant utiliser Sass !

Modifier le fichier style.css en style.scss afin que le loader le reconnaisse comme un fichier sass.

Mise en place de l'index.html
Commencez par le fichier index.html en créant le template de base avec Emmet. Dans VS Code, entrez ! puis faites entrée.

Changez le titre et la langue :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Blog</title>
  </head>
  <body>
    <div class="container">
      <h1>Accueil</h1>
    </div>
  </body>
</html>
Modification de style.scss
Nous allons ajouter le style suivant pour tester la configuration de Webpack :

.container {
  h1 {
    color:red;
  }
}
Modification de index.js
Nous n'avons plus qu'à importer le style dans index.js pour en faire une dépendance pour Webpack :

import "./style.scss";
Vous pouvez lancer le projet pour tester :

npm start

webpack_2.config.js

//npm i copy-webpack-plugin
//recupérer le plugin
// copy toutes les ce qui l'y a dans le dossier assets images dans /dist assets images
const CopyWebpackPlugin = require("copy-webpack-plugin");
//
 plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: './src/assets/images/*',
          to: 'assets/images',
          flatten: true,
        },
      ],
  }),