A hundred front-end frameworks blossomed, and various excellent frameworks (React, Vue, AG) emerged. To facilitate rapid development of developers, develop corresponding CLI scaffolding to improve output. However, beginner and intermediate front-end engineers do not have a clear understanding of Webpack packaging and configuration in the project, which will easily lead to problems and do not know how to solve them. They will not even expand new functions through Webpack, and they feel confused about how the WebPack + Vue project is built. Let’s solve this problem and lift the veil on how WebPack builds VUE.

What is Webpack?

Cool animated pages, highly complex page features, and page content support for pre-loading (images, skeleton screens) all led to the addition of more code to the project. The increase in code creates the need for code to be organized, which leads to modularity.

The history of modularity

The traditional

Although the server side is convenient to use, the browser requests files over the network asynchronously, so there is a contradiction. In order to solve the CommonJS specification defects, AMD specification (asynchronous require request) appeared, meet the asynchronous network request, can load multiple files ES6 modules in parallel, ES6 has its own corresponding module syntax input/exports, static analysis is easy. However, browser support is insufficient and modules are few. Webpack emerged to solve the problems encountered above.

Modular solution – Webpack

Webpack is a static module bundler for modern JavaScript applications. All files in WebPack are used as modules, and when WebPack works with the application, it recursively builds a Dependency graph containing each module the application needs, and then packages all of these modules into one or more bundles. For example: Consider your project as a whole through a given master file (e.g. Mian.js), webpack this file to start finding all of your project’s dependencies, use loaders or plugins to process them, and finally pack it into one (or more) JavaScript files that the browser can recognize.

Advantages and disadvantages of Webpack

Let’s start with three advantages of WebPack:

  • ** Modular packaging: ** Convert CSS, JS, TS, SASS, etc. into a uniform pattern that the browser can recognize and pack as needed (compressed or uncompressed).

  • ** Webpack-plugin: **webpack-plugin is a plugin that extends webpack functionality, takes effect throughout the build process, and performs related tasks.

  • ** Load on demand: ** Modules that are not needed in code are not bundled, or loaded on demand. This is not possible with traditional process building tools such as Gulp, Grunt, etc.

Nor can we ignore its following disadvantages:

  • ** Complex projects developed with traditional technologies are not suitable: ** Some complex projects developed with modular scripts such as jquery, Requirejs, SeaJS, etc. Due to unstable packaging requirements, WebPack maintenance costs are very high.

  • ** More intrusive: ** For projects using WebPack, some of the advanced syntax features need to rely on unique syntax implementation, which is to some extent WebPack-oriented development and requires a certain learning cost.

  • ** Compatibility issues: ** WebPack is always facing the latest standards, many features of its own need polyfill to downward compatibility, even some features of the latest browser is not native compatibility, need to pay attention to when doing development.

The webPack build process

The Webpack build process is an event flow mechanism. The entire build process can be viewed as an assembly line, with each step responsible for a single task and then moving on to the next step.

Webpack publishes events at each stage, giving built-in and custom plug-ins the opportunity to intervene in the Webpack build process and control the results of the Webpack build

** Initialization parameters: ** Reads and merges parameters from configuration files and Shell statements to arrive at the final parameters.

Start compiling: initialize the Compiler object with the parameters obtained in the previous step, load all configured plug-ins, and execute the object’s run method to start compiling. Identify entry: Locate all entry files according to the entry in the configuration.

** Compile modules: ** Start from the entry file, call all configured Loader to translate the module, find the module that the module depends on, and then recurse this step until all the entry dependent files have gone through this step.

** Complete module compilation: ** After using Loader to translate all modules in Step 4, we get the final content of each module after translation and the dependencies between them.

** Output resources: ** Assemble chunks containing multiple modules according to the dependencies between entries and modules, and convert each Chunk into a separate file and add it to the output list. This step is the last chance to modify the output content.

** Output complete: ** After determining the output content, determine the output path and file name according to the configuration, and write the file content to the file system.

Now that you’re familiar with the basic webPack build process, let’s start building vue projects

Webpack builds the VUE project

Install webpack

Version: WebPack5.x

Create a new WebPack-vue project, go to the project root directory, and create the default package.json

Install webpack and webpack- CLI:

  • Webpack – Module packaging library

  • Webpack – CLI – Command line tools

Create a new SRC /main.js and say console.log(‘hello,webpack-vue’)

The result:

Basic configuration

Create a new build folder and create a vue.config.js

Entry

Entry file, where WebPack will compile first

Output

Defines the location of the packaged output and the corresponding file name. [name] is a placeholder

The result:

plugins

When we built the project and generated main.js, we needed an HTML page to display it, and then HTML to introduce JavaScript. When we configured the bundle output to be configured with random hash values, each manual insertion and the next update were very cumbersome. The best way to do this is to automatically package the new bundle into HTML after each build and remove the last old Bunble, So we need the htML-webpack-plugin and clean-webpack-plugin to automatically import and remove historical bundles

Create a new public/index.html default template in the root directory

Configure the vue. Config. Js

The result:

loaders

Webpack identifies CSS, sass installs loader, and inserts parsed CSS styles into index.html

The result:

Recognize compressed images and fonts

Webpack identifies images, videos, fonts, reducing the size of image fonts, and so on. We can use url-loader to convert files smaller than the specified size to base64, and file-loader to move files larger than the specified size to the specified location

Babel

Babel is a JavaScript compiler that converts ES6 + code into ES5 code, allowing you to use the latest language features without worrying about compatibility.

During compilation by Babel, the configuration is read from the configuration file in the project root directory. Create the configuration file.babelrc for Babel in the root directory

Compatible with the vue

  • vue-loader

  • vue-template-compiler

  • vue-style-loader

Create a new APP. Vue in the SRC folder and customize the content

Hot update HMR

Configuration package. Json

Package. json :” dev”:”webpack serve –config build/vue.config.js”

The result:

Recommended reading

Go-zero: Out-of-the-box microservices framework

Practical notes: Configure the mental path of the monitoring service for NSQ