Webpack 4.x basic setup. This is a summary from an expert, but when I rewrote the demo using Webpack 5, I found several issues.

1: CleanWebpackPlugin

Correct approach:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin(), // folders to clean
  ]

2: merge

Correct usage:

const { merge } = require('webpack-merge');

3: Extracting CSS. The original demo used extract-text-webpack-plugin and encountered a TypeError: Cannot set property 'index' of undefined. This is because in Webpack 5, the configuration for extracting CSS is as follows:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[id].css'
    })
  ]

4: Adding CSS prefixes (not working in Webpack 5 test) 5: Removing redundant CSS (error: compiler.plugin is not a function in Webpack 5) 6: Not tested image plugin

7: Add externals configuration to webpack

8: Preload and Prefetch plugins for optimizing resource loading in web pages

Purpose: When you don't want to download a package but use a CDN, this method can be used to reduce bundle size.

Common enterview question: Difference between Loader and Plugin.

Loaders are used during the build process to handle source files (JSX, SCss, Less, etc.). Each loader processes one file at a time. Webpack can call external scripts or tools to process different file formats, such as converting SCSS to CSS, transforming ES6/ES7 syntax into browser-compatible code, and converting JSX to JS.

Plugins do not directly operate on individual files; they affect the entire build process. They offer features like optimization, compression, and redefining environment variables.

Differences in execution timing:

1. Loaders run before the file is bundled, processing files when modules are loaded.
2. Plugins work throughout the entire compilation cycle.

In Webpack configurations, the following is commonly used:

const path = require('path')

Many people are unaware of:

path.join
path.resolve

Detailed explanation of their differences:

One, path.join() method

The path.join() method combines multiple string parameters into a single path string. console.log(path.join(__dirname, 'a', 'b')); If the current file's path is E:/node/1, the result will be E:/node/1/a/b. console.log(path.join(__dirname, '/a', '/b', '..')); The leading / does not affect the combination, and .. represents the parent directory. The result is E:/node/1/a. console.log(path.join(__dirname, 'a', {}, 'b')); path.join() also validates the path string, and if it's invalid, it throws an error: Path must be a string.

Exampple:

const path = require('path');
let myPath = path.join(__dirname, '/img/so');
let myPath2 = path.join(__dirname, './img/so');
let myPath3 = path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');


console.log(__dirname);
console.log(myPath);
console.log(myPath2);
console.log(myPath3);

Two, path.resolve() method

The path.resolve() method starts from the application root directory and resolves an absolute path based on the parameters.

It treats the application root as the starting point.

Strings represent subdirectories.

/ represents the absolute root path.

console.log(path.resolve()); gets the directory of the application startup file (the absolute path of the current execution file) E:\zf\webpack\1\src. console.log(path.resolve('a', '/c')); results in E:/c, since / represents the root directory.

We should be careful when using / slashes. console.log(path.resolve(__dirname, 'img/so')); results in E:\zf\webpack\1\src\img\so, which concatenates the file path without checking if the path exists. console.log(path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif')) results in E:\zf\webpack\1\src\wwwroot\static_files\gif\image.gif. It uses the absolute path of the application start file with all subsequent strings.

.. represents the parent directory.

Example:

let myPath = path.resolve(__dirname, '/img/so');
let myPath2 = path.resolve(__dirname, './img/so');
let myPath3 = path.resolve('/foo/bar', './baz');
let myPath4 = path.resolve('/foo/bar', '/tmp/file/');


console.log(__dirname);
console.log(myPath);
console.log(myPath2);
console.log(myPath3);
console.log(myPath4);