Learn WebPack 5.x from Scratch

“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

Webpack concept

Before learning about Webpack, it’s important to understand what webpack is. In layman’s terms, Webpack is a static module packaging tool, as shown in the webPack website, which essentially combines all dependencies of an entry JS file into one or more bundles. It is an important tool for us to realize front-end engineering.

Entry

Entry is an entry that needs to be packaged. It must be a JS file. The way to define entry is very simple, corresponding to the entry field in the WebPack configuration file.

// webpack.config.ts

export default {
    entry: "./src/index.js"
}

Copy the code

The code above defines the entry to the WebPack package. Entry can also be multiple entry files packaged into one.

// webpack.config.ts

export default {
    entry: ["./src/index1.js"."./src/index2.js"].output: {
        filename: "bundle.js"}}Copy the code

Js and index2.js. Merge these two files and output them to bundle.js.

Here’s an example:

// entry1.js
function test1() {
  console.log('test1');
}
test1();


// entry2.js
function test2() {
  console.log('test2');
}
test2();


// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production'.entry: [
    path.resolve(__dirname, 'src'.'entry.js'),
    path.resolve(__dirname, 'src'.'entry1.js')],output: {
    filename: 'bundle.js',}};Copy the code

The output after performing the packaging is

(() = >{"use strict";console.log("test1"),console.log("test2")}) ();Copy the code

As you can see, the output file is a package of entry files into a file.

In addition to the above two methods, Entry can also pass in an object. Objects may be more complex than the first two methods of entry, but using an object as an entry is the easiest way to expand. The syntax is as follows:

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production'.entry: {
    app: path.resolve(__dirname, 'src'.'entry.js'),
    lib: {
      import: path.resolve(__dirname, 'src'.'entry1.js'),}},output: {
    filename: 'bundle.js',}};Copy the code

You can see that you put two entry files in the entry, their keys are app and lib; The value of app is the path to the entry file; The value of lib is an object.

The parameters of the object are as follows

Dynamic entry

All of the above entry methods are static. If we want to pass entry files dynamically, we need to pass entry a function that is called in the WebPack make event (which is the hook function of the WebPack lifecycle, as described below) :

// webpack.config.js
const path = require('path');

const getEntry = () = > {
  return {
    app: path.resolve(__dirname, 'src'.'entry.js'),
    lib: {
      import: path.resolve(__dirname, 'src'.'entry1.js'),
      // runtime: false,
      chunkLoading: 'jsonp'.asyncChunks: true,}}; };module.exports = {
  mode: 'production'.entry: getEntry,
  output: {
    filename: '[name].bundle.js',}};Copy the code

We can also put asynchronous functions in entry

// webpack.config.js
const path = require('path');

const getEntry = () = > {
  return new Promise((resolve) = > {
    resolve({
      app: path.resolve(__dirname, 'src'.'entry.js'),
      lib: {
        import: path.resolve(__dirname, 'src'.'entry1.js'),
        // runtime: false,
        chunkLoading: 'jsonp'.asyncChunks: true,}}); }); };module.exports = {
  mode: 'production'.entry: getEntry,
  output: {
    filename: '[name].bundle.js',}};Copy the code

Functions can return objects, strings, or arrays, and we can dynamically retrieve entry files within functions as needed.

conclusion

This article details the Entry property of the basic Webapck configuration. Entry Method for entering parameters

• You can pass in an entry file path directly,
• You can pass an array (multiple entry files) and merge it into one.
• You can pass in an object extension entry information
• You can pass in a function to get the entry file dynamically

This article is the first in a series of learning Webpack from Scratch, and the next or other sections can be found at 👇 :

Learn webPackage 5.x from scratch (1) Learn webpackage 5.x from scratch (2) Learn Webpackage 5.x from scratch (3) Learn Webpackage 5.x from scratch (4) Learn WebPackage 5.x from scratch (5)