• Welcome to follow my public number

  • The content of the study is as follows

  • start

  • NPM is having problems installing some packages using NPM, most likely because of our network. There are many installation sources of NPM package, and the default is NPM. If we are in China, we can switch the installation source to Taobao, so that the installation speed will be much faster.

Install the NRM widget with NPM first
npm install nrm --global

View the current installation source of NPM after installation
nrm ls

# Switch to using Taobao as the NPM installation source
nrm use taobao

What is the current installation source using
nrm ls
Copy the code

Note that sometimes you may encounter some problems when using Taobao as the installation source. In this case, you can temporarily switch the installation source to the original NPM.

webpack

  • Static resources in a web page

  • JS

    • .js .jsx .coffee .ts(TypeScript C#)

  • CSS

    • .css.less. Sass (almost no one uses it anymore).scss

  • Images

    • .jpe .png .gif .bmp .svg

  • The font file

    • .svg .ttf .eot .woff .woff2

  • Fonts) template file

    • .ejs.jade. vue(the way components are defined in weppack, recommended)

  • Problems with static resources in web pages?

  • Slow loading because we have to make a lot of secondary requests.

  • 2. Complex dependencies to deal with

  • How to solve the problem?

  • 1. Merge, compress, Sprite, Base64 encoding of images (URL pointing directly to Base64)

  • Dependencies can be resolved using requireJS or webPack

  • What is Webpack?

  • Webpack is a static module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles. Front-end tools developed based on Node.js

webpack

  • Perfect solution

  • 1. Based on Gulp and task

  • 2. With WebPack, it is built on the basis of the entire project

    • Webpack automatic construction tool, can perfect the realization of resources merge, packaging, compression, confusion and many other functions

  • Webpack case

  • JQuery is a fast, concise JavaScript framework and a great JavaScript code library (or JavaScript framework) after Prototype. JQuery is designed to “write Less, Do More”, which is to write Less code and Do More things. It encapsulates common JavaScript functionality and provides a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction.

  • 1, NPM init

    2, NPM I jquery-s

    3. Automatic generation

  • The ES6 code is too advanced for the browser to parse, so this line will result in an error: import $from ‘jquery’

  • How to solve it? Use Webpack to help us process. 1, install webpack NPM I webpack -g NPM I webpack -g

Run NPM I webpack — save-dev in the root directory of the project to install the dependencies of the project

  • Use WebPack to package the build1, run,npm init2. Create a directory structure for the project

    3, use,npm i jquery --saveInstall the jQuery dependency packagemain,jsAnd write the code logic.webpack .\src\main.js -o .\dist\bundle.jsWebpack entry file path Output file path

  • Packaging complete

webpackWhat can you do

  • Webpack can handle JS file dependencies: ideally only one main.js per project but not recommended
  • 2, Webpack can deal with Js compatibility problems, the advanced browser does not know other syntax into low-level browsers can execute
  • The command format to run: path of the file to pack webpack -o Path of the output file