1. What are the common static resources in web pages?
- Js：
- .js .jsx .coffee .ts
- Css：
- .css .less .sass .scss
- Images：
- .jpg .png .gif .bmp .svg
- Font file:
- .svg .ttf .eot .woff .woff2
- Template file:
- .ejs .jade .vue
2. What are the problems after introducing more static resources in the webpage?
- The page loads slowly because we have to initiate many second requests
- To deal with intricate dependencies, such as the introduction of bootstrap, jquery
3. How to solve the above two problems:
- Base64 encoding of merge, compression, sprite image, picture
- You can use only the requiredJs you learned before, or you can use webpack to solve the complex dependencies between various packages
4. What is webpak?
Webpack is a front-end project construction tool, which is a front-end tool developed based on nodejs.
5. How to realize the above two solutions perfectly?
- Using Gulp is based on task tasks
- Using webpack is built based on the entire project
- With the help of webpack, a front-end automated build tool, many functions such as resource merging, packaging, compression, and obfuscation can be perfectly achieved.
6. Webpack installation
- Run
npm install webpack -ga global installation webpack, so you can use webpack global commands. - Run and
npm install webpack --save-devinstall in the project root directory to the project dependencies
7. Demo case
Need to introduce webpack globally and npm install jquery --saveinstall jquery in the project .
Directory structure of small cases
index.html code:
main.js code:
Packaging results:
