preface

I want to have a personal blog site recently. So, go to GitHub and find a template of a project that someone else has done and use it as a reference. Then, it turns out that the way their project is organized doesn’t seem to be directly created using react scaffolding. After many twists and turns, the mystery was discovered. Everyone uses WebPack to package their projects. So, stomp pit sister began to learn webpack journey. Before learning a new thing, we should first understand what it is and what it is used for. Then the question to figure out is how does it work; Finally, understand what the internal implementation mechanism is. Since I’m new to Webpack, I’ll just cover two questions in this article:

  • What is webpack ————————
  • How to create a WebPack project ——————- to use

What is Webpack?

In the official webPack website documentation, the description of WebPack is like this

Essentially, WebPack is a static module packaging tool for modern JavaScript applications. When WebPack processes an application, it builds a dependency graph internally that maps to each module required by the project and generates one or more bundles.

I think the instructions on the website are pretty clear. But here, I still want to talk about my own understanding. Literally, “webpack” can be divided into two parts, “Web” and “pack”. Obviously, the Web is the website, the site means; To pack is to pack. To put a piece together means to package your website or to package your website. Literally, WebPack is a packaging tool. What to pack? Obviously, the project of the application website. Since it is packing, there must be a before and after packing. The pre-packaged content is usually referred to as source code or resources; And the stuff that’s packaged, it’s called a bundle. I looked it up. The word bundle means a bundle. It’s like a bunch of HTML files and A bunch of JS code. See here is not a vague feeling, this process is the C language compilation process. A bunch of *.h and *.c files are converted by the compiler into *.o files, which are then linked together by dependencies to become an executable application. But is it really like this? Now that you ask me, obviously not. In terms of the final results, you can also see that. The webpack-wrapped output file still has.js and.html extensions, but when compiled, the extensions have changed to something else, not the original.c and.h. Now that you have a general idea of what WebPack is, it’s important to look at some of the core concepts in WebPack:

  • Entry: There is the concept of an entry point. This property indicates which module WebPack should use to start building an internal dependency graph
  • Output: This property tells WebPack where to output the bundle it has created
  • Loader: Webpack can only process JavaScript and JSON files. Loader enables WebPack to process other types of files and convert them into valid modules
  • Plugins: Can perform a wider range of tasks, such as packaging optimization, resource management, and injecting environment variables
  • Mode: There are three parametersdevelopment|production|none, which is used to configure optimizations for different environments
  • Browser compatibility: Since webPack-packed projects run in the browser side, browser compatibility issues need to be considered
  • Environment: The runtime environment of WebPack

Create a WebPack project

Start building projects

  1. Create a project folder

The process of creating a WebPack project is a little different from the process of creating a React project using scaffolding. The first step in creating the scaffold is to install the create-react-app globally, and then create the project using the create-react-app. However, creating a WebPack project is by creating the project directory and then initializing it with the NPM command. Enter the following command in the Windows command prompt or the VScode terminal:

mkdir webpack-demo

cd webpack-demo

npm init -y

The last command generates a package.json file that contains the basic information for the newly created project.

{
  "name": "webpack-demo"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"
}
Copy the code

There are a few things to look out for in this file. “scripts” contains the commands that are typed into the command prompt; “Main” defines the starting point for webPack packaging.

  1. Install WebPack and webpack-CLI locally

Use the NPM command to install webpack and webpack-CLI locally

npm install –save-dev webpack webpack-cli

After the installation, there will be a node_modules folder and a package-lock-. json file in the project root directory, and the following code will be added to the package.json file:

  "devDependencies": {
    "webpack": "^ 5.37.1"."webpack-cli": "^ 4.7.0"
  }
Copy the code

In this code, “devDependencies” refers to the library dependencies used during development. “Dependencies” refers to the library dependencies used in your project.

The first bundle

  1. Create a file directory structure
webpack-demo
| - package.json
| - /dist
    | - index.html
| - /src
    | - index.js
Copy the code
  1. addlodashRely on

npm install –save lodash

  1. The main code
  • index.html
 <! DOCTYPEhtml>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>start</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
 </html>
Copy the code
  • index.js
import _ from 'lodash';

 function component() {
   const element = document.createElement('div');

  // Lodash is imported in the current script using import
   element.innerHTML = _.join(['Hello'.'webpack'].' ');

   return element;
 }

 document.body.appendChild(component());
Copy the code
  1. Change the package.json file

Remove the “main” : “index. Js”; Add a “private” : true

  1. Running the package Command

npx webpack

Run this command to package the entry file and generate the specified bundle file. If it works properly, open the index.html file in your browser, and you will see the words “Hello Webpack”, as shown in the following figure.

Using a configuration file

  1. In the root directory, add the webpack.config.js file
  2. Add the configuration in webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js'.output: {
    filename: 'main.js'.path: path.resolve(__dirname, 'dist'),}};Copy the code
  1. Running the package Command

npx webpack –config webpack.config.js

Use the NPM script command

  1. Update the package.json file:

Under scripts add:

"build": "webpack"
Copy the code
  1. Run the NPM command:

npm run build

At this point, we have completed the entire process of creating a project using WebPack.