Shulou(Shulou.com)06/01 Report--

This article will explain in detail how webpack creates a jquery project. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. Create the folder "webpack-study"

two。 Use webstrom to open the location of the folder. Create a file named "src" in the root directory, create a new css, images, js folder under the src file, and create a new index.html file and main.js file under the src folder.

3. Now we need to complete an interlaced discoloration requirement to familiarize ourselves with the process of using webpack. Add 6 li under the index.html file

4. I'm going to use jquery to do interlaced discoloration. First initialize the webpack and enter it at the terminal

A package.json file is generated in the root directory with the corresponding configuration information

5. Install jquery through webpack. Input at the terminal

After success, a folder of "node_modules" is generated in the root directory.

6. Import modules in "main.js" through import $from 'jquery'

7. The main.js file is introduced into index.html, and the effect of writing does not take effect in the browser. The import syntax is too advanced for browsers to recognize. At this time, we have to deal with it through webpack and package a file. Enter in the terminal

Dist folders and bundle.js files are also generated in the folder

But the terminal sent a warning.

The warning in the yellow part means that there is no setting mode, there are development mode and production mode, next, find package.json. Add "dev" and "build" as well as their values.

Create a new "webpack-config.js" file on the root directory

The problem was solved.

8.index.html introduces the bundle.js file, and the browser effect is normal.

Through this little chestnut, we can find that webpack can solve the interdependence between js files; it can also deal with the compatibility of js, and change the high-level syntax that the browser does not recognize into the low-level syntax that the browser can recognize normally.

9. Modify the background color of the odd line of li in main.js. We want to see the effect of the modification on the browser. Do you always need to enter it in the terminal?

Can we type "webpack" directly to achieve the desired effect?

10. Enter "webpack" in the terminal

Pop-up prompt whether to install "webpack-cli", enter "no", after yourself in the terminal

After the installation is successful, the above prompt still pops up by typing "webpack" in the terminal.

11. Input at the terminal

Then enter webpack in the terminal successfully.

twelve。 Create a new "webpack.config.js" configuration file under the root directory. Since webpack needs to specify the paths to the entry and output files when running the webpack command, we need to configure these two paths in-- webpack.config.js--:

Use the tool "webpack-dev-server" to realize the function of automatic packaging and compilation.

This is the end of this article on "how webpack creates a jquery project". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.