Common commands Vue
1: npm i webpack -g global installation webpack.
2: npm i webpack --save-dev mounted to project dependencies.
3: npm init -y create package.json file.
4: npm i jquery -S installation jquery.
table of Contents:
1: static resources
2: static resource page introduced much later what is the problem? ? ?
3: How to solve these two problems
4: What is webpack?
5: How perfect realization of the above two kinds of solutions
6: Installation of two ways webpack
1: What are the common static resource references in a Web page?
+ JS
- .js .jsx .coffee .ts (TypeScript class C # language)
+ CSS
- .css .less .sass .scss
+ Images
- .jpg .png .gif .bmp .svg
+ Font file (Fonts)
- .svg .ttf .eot .woff .woff2
+ Template file
- .ejs .jade .vue [This is the way webpack defined components, such use is recommended]
2: static resource page introduced much later what is the problem? ? ?
1. slow loading pages, because we want to launch a lot of secondary request;
2. To deal with complex dependencies
3: How to solve these two problems
1. consolidation, compression, sprite, Base64 encoded image
2. learned previously may be used requireJS, may also be used webpack solve complex dependencies between individual packets;
4: What is webpack?
webpack is a front-end project build tool, which is based on Node.js developed a front-end tool;
5: How perfect realization of the above two kinds of solutions
1. Gulp, is based on the task task;
2. Use Webpack, based on the entire project is built;
+ Build tools by means of webpack the front-end automation, you can achieve the perfect merger of resources, packing, compression, confusion, and many other functions.
+ According to the official website of the picture describes the procedure webpack packed
+ [Webpack official website] (http://webpack.github.io/)
6: Installation of two ways webpack
1. Run `npm i webpack -g` globally installed webpack, so that we can use the global command WebPACK
2. Run the project root directory `npm i webpack --save-dev` mounted to project dependencies