Basics of building Frontend projects with Webpack

1. Use of permitted characters

Use only letters (Latin), numbers, hyphens (-), and underscores (_). Avoid using spaces and special characters (e.g. @, #, !, %, etc.). Use spaces by replacing them with hyphens or underscores, e.g. my-project or my_project.

2. Character Case

It is best to use lowercase for naming to avoid confusion on different operating systems that may be case sensitive (for example, Linux distinguishes between Folder and folder).

3. Name Length

Avoid very long file and folder names. Short and descriptive names are better for ease of use. The maximum length of a file or folder path (including all subfolders) may be limited by the system; for example, Windows has a limit of 260 characters.

4. Using meaningful names

Use names that logically reflect the contents or purpose of the folder. This will help you and other developers navigate your project more easily.

5. Avoid reserved words

Avoid using operating system or Git reserved words (e.g. CON, PRN, AUX, NUL on Windows).

6. Avoiding different encodings

Avoiding different encodings Use UTF-8 for file and folder names to ensure maximum compatibility.

7. Features of working with Git

Git works best with ASCII characters, so it’s best to avoid non-ASCII characters (such as Cyrillic characters) to avoid potential problems with different systems or when collaborating with other developers.

Examples of Correct Folder Names:

1. my_project
2. src
3. test-files
4. config
5. backup_2024
6. docs
7. scripts
8. assets
9. lib_v1
10. user-data

Examples of Incorrect Folder Names:

1. My Project (space between words)
2. src#1 (special character #)
3. test/files (character / is used as a path separator)
4. con (reserved word in Windows)
5. backup@2024 (special character @)
6. Documents (incorrect use of Cyrillic)
7. scripts! (special character !)
8. assets% (special character %)
9. lib\v1 (character \ is used as a path separator)
10. user:data (colon : is a special character in many OSes)

npm install webpack webpack-cli --save-dev

npm install --save-dev webpack

npm install webpack webpack-cli

const HtmlWebpackPlugin = require('html-webpack-plugin');

• Description: Imports the html-webpack-plugin for Webpack.
• Purpose: Automatically generates an HTML file in your build directory (dist) and injects all compiled scripts and styles. It automates including JS and CSS files in your HTML.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

• Description: Imports the clean-webpack-plugin.
• Purpose: Cleans (removes) all files in the build directory (dist) before each new build to avoid leftover or unused files.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

• Description: Imports the mini-css-extract-plugin.
• Purpose: Extracts CSS from your JavaScript modules into separate CSS files, improving site performance by loading styles independently of scripts.

const CopyWebpackPlugin = require('copy-webpack-plugin');

• Description: Imports the copy-webpack-plugin.
• Purpose: Copies files or entire folders from the src directory into dist (or another build folder), preserving structure. Useful for static assets like images or CSS files (e.g. reset styles) that don’t require Webpack processing.

module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ],
    },
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
      ],
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'images/[name][ext]',
      },
    },
  ],
},

• Description: Configures how different file types (JavaScript, CSS, images, etc.) should be handled during the build process. rules: An array of rules where each rule specifies how to handle a particular file type.
• Each rule contains:
• test: A regular expression (RegExp) that defines the type of files to which the rule applies. For example, /\.scss$/ matches all files ending in .scss.
• use: An array of loaders that will be applied to files that match the test.
• MiniCssExtractPlugin.loader: Extracts CSS into separate files.
• css-loader: Processes CSS files and adds them to JavaScript.
• sass-loader: Compiles SCSS into CSS.
• type: The type of file processing. asset/resource processes files as resources (copies them to the output directory).
• generator: Allows you to customize the name and path for the generated files. In the example, the images will be stored in the images folder in the output directory.Description: Connects the copy-webpack-plugin.
• Purpose: This plugin copies files or entire folders from the src directory to the dist directory (or another build folder), preserving their structure. It is useful for copying static files that do not need to be processed by Webpack, such as images or CSS files used as style resets.

plugins: [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    template: './src/index.html',
  }),
  new MiniCssExtractPlugin({
    filename: 'css/[name].css',
  }),
  new CopyWebpackPlugin({
    patterns: [
      { from: 'src/images', to: 'images' },
      { from: 'src/css/reset.css', to: 'css/reset.css' },
    ],
  }),
],

• Description: An array of plugins that add additional functionality to the build process.CleanWebpackPlugin: Cleans up the source directory (dist) before a new build.
• HtmlWebpackPlugin: Automatically generates an HTML file and adds all the collected scripts and styles to it.
• MiniCssExtractPlugin: Extracts CSS into separate files and saves them in the css folder.
• CopyWebpackPlugin: Copies files or folders from src to dist without modification.Cleans the output directory (dist) before a new build.
• HtmlWebpackPlugin: Automatically generates an HTML file and adds all the collected scripts and styles to it.
• MiniCssExtractPlugin: Extracts CSS into separate files and saves them in the css folder.

devServer: {
  static: {
    directory: path.join(__dirname, 'dist'),
  },
  compress: true,
  port: 9000,
  open: true,
  hot: true,
  devMiddleware: {
    writeToDisk: true,
  },
},

• Description: Configuration for Webpack DevServer – a local development server that simplifies the dev process.
• static: Specifies the directory to serve static files from (in this case, dist).
• compress: Enables gzip compression to reduce response size and improve load times.
• port: Defines the port the server runs on (9000).
• open: Automatically opens the browser after the server starts.
• hot: Enables Hot Module Replacement (HMR) – updates changed modules without a full page reload.
• devMiddleware: Additional settings for the dev middleware.
• writeToDisk: Allows writing files to disk – useful for debugging.

mode: 'development',

• Description: Defines the Webpack operating mode.
• Purpose: mode can be 'development' or 'production'. In development mode, Webpack generates unminified files with source maps for easier debugging. In production mode, Webpack optimizes and minimizes files for faster loading.