Front-end domain frameworks are blooming, with all kinds of good frameworks (React, Vue, AG) and so on. To facilitate rapid development, a corresponding CLI scaffold was developed to increase production. However, junior and intermediate front-end engineers do not have a clear understanding of Webpack packaging and configuration in the project, which may easily lead to problems that they do not know how to solve. They even do not extend new functions through Webpack, and they are confused about how to build Webpack + Vue project. Let’s take a look at this problem and lift the veil of Webpack building Vue.

What is Webpack?

Cool animated pages, highly complex page features, and content support for preloading (images, skeleton screens), all of these high requirements lead to more code being added to the project. The proliferation of code leads to the need for code to be organized, resulting in modularity.

The development of modularization

The traditional <script> tag, a tag loads a JS file. The disadvantage is that there are too many global variables, which are prone to conflicts. In addition, the order of dependencies is very important, so too many JS are not easy to manage. Then came Node.js and the CommonJS specification (synchronous require request), which means that a module is a file, and anyone who wants to use it directly requires and be used by anyone, exports it to module.exports.

Although the server is easy to use, the browser fetches the file asynchronously through the network request, so there is a contradiction. In order to solve the defect of CommonJS specification, AMD specification (asynchronous require request) has come into being. To satisfy asynchronous network request, multiple files can be loaded in parallel ES6 modules. ES6 comes with corresponding module syntax input/exports, which makes static analysis easy. But there is not enough browser support and fewer modules. To this end, Webpack appears to solve the problem encountered above.

Modular solution – Webpack

Webpack is a static module bundler for modern JavaScript applications. All files in Webpack will be used as modules, and as Webpack processes the application, it recursively builds a dependency graph containing each module required by the application, then packages all of these modules into one or more bundles. Example: Think of your project as a whole, using a given master file (e.g. Mian. Js), Webpack starts by finding all of your project’s dependent files, processing them using loaders or plugins, and packaging them into one (or more) JavaScript file that the browser can recognize.

The pros and cons of Webpack

Let’s start with three advantages of Webpack:

  • Modular packaging: Conform CSS, JS, TS, SASS, etc. into browser-recognized patterns and package them on demand (compressed or uncompressed).
  • Webpack-plugin: Webpack-plugin is a plugin that extends Webpack functionality, takes effect throughout the build process, and performs related tasks.
  • Loading on demand: Unneeded modules in the code are not packaged 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 techniques are not applicable: Some complex projects developed with modularized scripts such as jQuery, RequireJS, Seajs, etc., have high maintenance costs due to unstable packaging requirements.
  • Intrusive: For Webpack-using projects, some advanced syntax features rely on unique syntax implementations, which are Webpack-oriented development to some extent and require some learning costs.
  • Compatibility issues: Webpack is always dealing with the latest standards, and many of its features need to be polyfilled to work backwards. Even some features are not native-compatible with the latest browsers, which should be paid attention to during development.

The Webpack build process

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

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

Initialization parameters: Reads and merges parameters from configuration files and Shell statements to get the final parameters.

Compiler starts: The parameters obtained in the previous step initialize the Compiler object, load all configured plug-ins, and execute the object’s run method to start the compilation. Determine entry: Find all entry files according to the entry in the configuration.

Compile the module: Start from the entry file, call all configured Loaders to translate the module, and then find the module that the module depends on, and recurse this step until all the files that the entry depends on have passed this step.

Completion of module compilation: After all modules are translated by using the Loader in Step 4, the final content of each module translated and the dependency relationship between them are obtained.

Output resources: According to the dependencies between the entry and the module, assemble a Chunk containing multiple modules, and then convert each Chunk into a separate file to be added to the output list. This step is the last chance to modify the output content.

Output completion: 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 go ahead and build a Vue project

Webpack builds the Vue project

Install webpack

Version used: Webpack5.x

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

Install Webpack and Webpack-CLI:

  • Webpack – a module packaging library
  • Webpack-cli – command-line tools

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

The result:

Basic configuration

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

Entry

The entry file, which Webpack will compile from first

Output

Defines the location of the output after packaging, and the corresponding file name. [Name] is a placeholder

The result:

plugins

When we build the project, after generating main.js, we need an HTML page to display it, and then HTML introduces JavaScript. When we configure the bundles that are packaged and output with random hash values, it becomes a hassle to insert and update each time manually. 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 HTML -webpack-plugin and clean-webpack-plugin to automatically introduce and delete history bundles

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

Configure the vue. Config. Js

The result:

loaders

Webpack identifies the CSS, installs the SASS loader, and inserts the parsed CSS into the style in index.html

The result:

Recognize compressed pictures and fonts

Webpack recognizes images, videos, fonts, and reduces the size of image fonts. We can use URL-loader to convert files of less than the specified size to base64, and file-loader to move files of greater than the specified size to the specified location

Babel

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

As Babel performs the compilation, the configuration is read from the configuration file in the root of the project. Create Babel’s configuration file. Babelrc 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 note: the mental process of configuring a monitoring service for NSQ