This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Why use WebPack

Today’s front-end projects use a variety of libraries, such as LoDash and jQuery, with complex JavaScript code and a lot of dependency packages. At the same time, we also need to use the front-end framework to compile our code for drawing pages and interactive functions, while in order to speed up development and development experience, we may need to deal with some pre-processing languages such as CSS, LESS, and SCSS. Our front-end code will become bloated and complex. A number of good practices have emerged in the front-end community to simplify development:

The first was modularizing our code, allowing us to break down complex programs into smaller files. Later, we developed TypeScript, an extension of javaScript, as a future solution to weak typing in javaScript: Enables us to implement features that are not directly available in current versions of JavaScript, and can then be converted to JavaScript files for browsers to recognize; These improvements made development much more efficient, but files developed with them often required additional processing to be recognized by the browser, and manual processing was cumbersome, which provided the need for webPack-like tools.

What is a Webpack

WebPack can be thought of as a module packaging tool: it first analyzes the structure of your project, walks through all JavaScript modules and other extension languages such as Scss and TypeScript that browsers don’t run directly, and converts and packages them into appropriate formats for browsers to use.

Grunt and Gulp

Gulp is an automated build tool, which is mainly used to configure programs to automatically handle static resources, while Grunt is a front-end build tool, which has resource compression, code inspection, file merging and other functions. Grunt and Gulp work like this: in a configuration file, specify specific steps to perform tasks such as compiling, combining, and compressing certain files, and then automatically do those tasks for you.

Common static resources

  1. .js .jsx .coffee .ts(typescript)
  2. css
  3. images
  4. The font file
  5. Template file

These static files are the ones we often need to reference, but browsers parsing renderings with too many static resources will load slowly. There are also many dependencies that can be affected. The solution is:

  • Merge, compress
  • Base64 encoding of the image
  • Using requireJS, you can also resolve dependencies with WebPack
  • Gulp is a Task-based solution
  • Webpack is a project-based solution

First time using WebPack

Interlacing HTML begins by building a project directory:

  • Dist (Webpack packed file directory)
  • SRC (HTML, CSS, JS files)
  • Node_modules (library files introduced by NPM)
  • Package. json (NPM init)
The first step is to install webPack
npm install webpack -g
Copy the code

Then create index.html

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = /, initial - scale = 1.0" />
    <title>Document</title>
    <! -- The following script tag is a file introduced after webpack is packaged -->
    <script src=".. /dist/main.js"></script>
  </head>
  <body>
    <ul>
      <li>I am a label</li>
      <li>I am a label</li>
      <li>I am a label</li>
      <li>I am a label</li>
    </ul>
  </body>
</html>
Copy the code

src>main.js

import $ from 'jquery'
$(function () {$('li:odd').css('backgroundColor'.'lightblue'The $()'li:even').css('backgroundColor'.'lightyellow')})Copy the code

Dist/webpack. / SRC /main.js./dist/main.js will generate main.js file. A simple WebPack packaging process is complete! There’s more to WebPack than that, of course. Webpack also has many extended features, which will be covered in the next article.