[Preliminary knowledge] basics of webpack entry

what is webpack

Concept: webpack is a specific solution for front-end project engineering

Main functions: It provides friendly front-end modular development, supports code compression and confusion, handles browser-side js compatibility, performance optimization and other powerful functions.

experience webpack

1. Create a list of interlaced color-changing items

The final effect is as follows:

1.1 webpack packaging

Step 1: Create a new folder, Chinese characters are not allowed. and right-click to open

the terminal and type in the terminal

npm init -y, initialize the package management configuration file package.json

The second step , in the current folder, create a folder, the src source code directory. And in the src directory, create the index.html home page, and the index.js script

The name is fixed, because webpack packages the entry index.js by default

The third step is to initialize the basic structure of the home


page. At this point, when we open the web page, we will find that jquery does not take effect. When we open the console, we will find that the error is as follows:

This is because we use ES6 syntax in index.js.

import $ from 'jquery'

In order to solve this kind of error, or "incompatible ES6 syntax", we will use webpack below.

Install webpack in the project

Run the following command on the terminal to install two packages related to webpack:
npm install [email protected] [email protected] -D

After the operation is complete, open package.json and you can see:

It is worth mentioning that

Configure webpack in the project

Create the file webpack.config.js in the folder

and initialize the basic configuration as follows:

Open the scripts node of package.json, and add the dev script as follows:

Finally, run the npm run dev command on the terminal to start webpack to package and build the project

The last step is to open index.html

to open the web page and complete.