webpack

use of babel

• used to convert es15+ code into backward compatible JS code.
• in React it is used to convert JSX into react functions (createElement())

use of webpack

• convert multiple js files, components into single file (minimized)
• we can use different kind of loaders to handle different kind of files (eg. importing css, sass, images, svg into js files)

Notes:-

1. in webpack rule, use array start evaluating from behind.
   (eg. ["style-loader","css-loader"] ) first css-loader will run and then style-loader

2. for css modules

     use: [
           "style-loader",
           {
             loader: "css-loader",
             options: {
               importLoaders: 1,
               modules: true, //responsible for css modules
             },
           },
         ],
         //how to use css modules?
         import * as styles from './style.module.css'
   
       // below way is not working
       import styles from './style.module.css'

3. Hot module reload for development
   two ways

   • "start":"webpack --mode=development --watch"
     It generate new files in dist so we have to open html file of dist using live server.

   • webpack-dev-server
     Install webpack-dev-server via npm

     //webpack.config.js
     devServer: {
     hot: true, //hmr
     open: true, //open browser
     port: 8081, //port
     }

     In package.json "start":"webpack-dev-server --mode=development"

LOADERS

• css-loader

  • convert css into valid js

• style-loader

  • take js from css-loader and inject into the dom

• babel-loader

  • use feature of babel-present-env & babel-preset-react.
    usage:

    rule: [
      {
        test: /\.m?[j]sx?$/, //for .js & .jsx files
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ];

PLUGINS

• MiniCssExtractPlugin

  • it provide loader which can be used instead of style-loader.
    MiniCssExtractPlugin loader will extract css into separate file
    usage:

    plugins: [new MiniCssExtractPlugin()];
    
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ];

• webpack.ProvidePlugin

  • If we don't use this plugin then we have to import react in every component file.
    usage:

    plugins: [
      new webpack.ProvidePlugin({
        React: "react",
      }),
    ];

• HtmlWebpackPlugin

  • If we don't use this plugin then webpack will only generate js or css file only. (we then manually attach this files to html file)
    If we use content-hash in file name then it is nightmare.
  • By using this plugin webpack gives us html file with js & css attached.
    usage:

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "index.html"),
    }),
  ];
  // we give template which have favicon, title & root element which react needs.

• CleanWebpackPlugin
  Used to clean dist folder before webpack generate new build.
  Usage:

  plugins: [new CleanWebpackPlugin()];

• CopyWebpackPlugin
  In react we have public folder which provides static resources. so we use CopyWebpackPlugin to copy all data from src/public folder and paste them in dist folder.
  usage:

  plugins: [
    new CopyWebpackPlugin({
      patterns: [{ from: "src/public" }],
    }),
  ];