Part 47: basic use of webpack (1)

Time:2022-1-4

good heavens,

1. Basic use of webpack

Write an example: implement a color changing list of parity rows

The steps are as follows:

① Create a new project blank directory and run the NPM init-y command to initialize the package management configuration file package json
② New SRC source directory
③ New SRC – > index HTML home page and Src – > index JS script file
④ Initialize the basic structure of the home page
⑤ Run the NPM install jquery-s command to install jQuery
⑥ JQuery is imported through ES6 modularization to realize the color change effect of list interlacing

 

 

It can be seen that the effect has not been achieved

 

The syntax is too advanced and the browser is incompatible

 

Try to solve this problem with webpack

 

2. Install webpack in the project

Run the following command on the terminal to install two packages related to webpack:

among

– s is short for — save
– D is short for — save dev

 

3. Configure webpack in the project

 

① In the root directory of the project, create a file named webpack.com config. JS and initialize the following basic configuration:

module.exports={
    mode:'development'  
}

//Mode is used to specify the build mode. The optional values are development and production


② In package Under the scripts node of JSON, add the dev script as follows:

"scripts":{
"dev": "webpack"
}
//Scripts under the script node can be executed through NPM run. For example, NPM run dev

③ Run the NPM run dev command in the terminal and start the webpack to package and build the project

(appears)  ! There it is !  ! It’s “NPM run dev”!   !   ! )

 

 

After running:

 

 

 

succeed

 

One dist file is added, and the main file is the processed file

 

takeChange the path of SRC to main JS path