A brief history of webpack construction and development

Time:2021-10-26

preface

In the last decade, with the rapid popularization of mobile phones, mobile tablets and wearable devices, the development of Web front-end has also developed from traditional PC web page development to multi terminal development. Therefore, we need to take into account the development of web pages with different resolutions such as PC H5 at the same time. Therefore, it is very important to make different packaging for different application scenarios. For example, for the middle and background applications on the PC side, we need to support the packaging construction of single page applications, and H5 pages usually have high requirements for performance and accessibility. Therefore, we need to support server-side rendering and PWA offline cache through construction.

In addition, the three most popular frameworks in the front-end community, react, angular and Vue, some of their syntax, such as JSX and Vue instructions, cannot be parsed in the browser and need to be converted by the construction tool. Being familiar with the use and principle of webpack can help you broaden the front-end technology stack and find the problems of page packaging speed and resource volume, Know how to troubleshoot and optimize. At the same time, being familiar with the principle of webpack is helpful to the development of other cross end applications. For example, when packaging applets, weex, react native, electron and other frameworks, you can get started quickly.

When I first came into contact with webpack, I was confused that everything about the packaging concept of webpack is a module. In webpack, not only JS is a module, but other HTML, CSS, pictures and fonts can become modules. Secondly, webpack configuration is extremely flexible and has strong plug-in expansion ability. To get started with webpack, you really need to understand many new concepts in webpack, such as entry, output, mode, loaders and plugins, hot update, code splitting and tree shaking.


Why build tools?

1. Convert ES6 syntax
The new syntax of ES is not well supported in browsers, especially in some low version browsers.
2. Convert JSX
3. CSS prefix completion / preprocessor
4. Compression confusion
5. Picture compression


The evolution of front-end construction

In the earliest front-end development, we cut pictures and then write JS and CSS codes. These codes are uncompressed. Later, we realize that the code is released online and hope that the code logic will not be exposed. Therefore, we will find some online tools to upload the source code, compress it through online tools, and then copy the compressed code to the local directory, This process is extremely cumbersome. In 2007, ant + tool was launched to compress the code locally. The above situation has lasted for several years.
Later, the concepts of requirejs and seajs modularization in the whole industry continued to give birth, so the front-end code writing method and modular writing method became more and more complex. Later, it evolved into grunt, which is essentially a task runner. Grunt will divide the whole construction process into tasks one by one, and each task will do one thing, such as in the whole grunt, The packaging process will be divided into HTML parsing, CSS parsing and JS parsing, including code compression and file fingerprint. He will count these as tasks. After the task is completed, he will store the task execution results in the directory of this disk. This will inevitably lead to slow packaging speed because there are IO operations on the local disk. Due to this problem, gulp has evolved. Gulp has the concept of file flow. The results of each task will not be stored in the files on the local disk, but directly stored in memory. In the next step, the memory of the previous step will be directly used, which will greatly improve the packaging speed.
At this stage, the most used packaging tool is webpack, in addition to rollup, parcel and so on.


Why webpack

From GitHub stars and weekly downloads, we can see that webpack far exceeds other build tools.
In addition, the webpack community is rich in Ecology: it provides rich plug-ins and loaders. Flexible configuration and plug-in expansion: you can define your own loaders and plug-ins to meet the personalized needs of the team. In addition, from the initial 1.0 to the current 5. X, the official iteration of webpack is updated very quickly.

Profile name

The default configuration file for webpack: webpack.config.js
You can also specify the names of configuration files used in different environments through webpack — config


Composition of webpack configuration

module.exports = {
  Entry: '. / SRC / index. JS', ----------------- packaged entry
  Output: '. / dist / main. JS', ------------------ packaged output
  Mode: 'production' ---------------------------------- specify the packaging environment
  module: {
    Rules: [------------------------------------------------ loader configuration
      {test: /\.txt/, use: 'raw-loader'}
    ],
  },
  Plugins: [----------------------------------- plug in configuration
    new HtmlwebpackPlugin({
      template: './src/index.html'
    })
  ]
}module

A zero configured webpack (default) specifies entry (‘. / SRC / index. JS’) and output (‘. / dist / main. JS’)


Environment construction

Install node.js and NPM
Webpack depends on the node.js environment
Check for successful installation: node – V and NPM – V

Create an empty directory and package.json file
npm init -y

Install webpack and webpack cli
Webpack 4 separates the kernel of webpack and webpack cli, so it is necessary to install webpak and webpack cli at the same time in practical use
npm install webpack webpack-cli –save-dev
Check if the installation was successful: webpack – V


Running webpack through NPM script

{
  "name": "webp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0"
  }
}

Principle: the module is locally installed on the node_ Create a soft connection from the modules /. Bin directory