webpack builds vue from 0 to 1

Front-end domain frameworks blossomed, and various excellent frameworks appeared (react, Vue, ag) and other frameworks. In order to facilitate the rapid development of developers, the corresponding cli scaffolding is developed to improve output. However, the junior and middle-level front-end engineers are not clear about the webpack packaging and configuration in the project, which can easily lead to problems and do not know how to solve them. They will not even use webpack to expand new functions. They feel how the webpack + vue project is built. Looking confused, let's solve this problem and uncover the veil of webpack to build vue.

What is webpack?

Cool animated pages, highly complex page functions, and page content support pre-loading (pictures, skeleton screens), these high requirements have led to the addition of more codes for the project. The increase in code has caused the need for the original code to be organized, resulting in modularity.

Modular development history

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. Too many js is not easy to manage. Later, node.js appeared, with the CommonJS specification (synchronous require request), that is, a module is a file. Whoever wants to use it directly requires who, and who wants to be used by whoever wants to use it, just export it with module.exports.

Although the server is convenient to use, the browser requests files asynchronously through the network, so there is a contradiction. In order to solve the deficiencies of the CommonJS specification, the AMD specification (asynchronous require request) has appeared, which can meet asynchronous network requests and can load multiple files ES6 modules in parallel. ES6 comes with corresponding module syntax input/exports, which makes static analysis easy. But the browser support is not enough and there are fewer modules. For this reason, webpack appeared to solve the problems encountered above.

Modular solution-webpack

Webpack is a static module bundler for modern JavaScript applications. All files in webpack will be used as modules. When webpack processes the application, it will recursively build a dependency graph, which contains each module required by the application, and then package all these modules Into one or more bundles. Example: Regarding your project as a whole, through a given main file (such as: mian.js), webpack will start to find all dependent files of your project, use loaders or plugins to process them, and finally package it into One (or more) JavaScript files that the browser can recognize.

Pros and cons of webpack

Let's take a look at the 3 advantages of webpack:

modular packaging: converts css, js, ts, sass, etc. into a mode that the browser can recognize, and packs it on demand (compressed or uncompressed).
webpack-plugin: webpack-plugin is a plug-in used to extend webpack functions. It is used to extend webpack functions and takes effect during the entire build process to perform related tasks.
Load on demand: that are not needed in the 160ed410cd00ab code are not packaged or loaded on demand. This is something that traditional process construction tools such as Gulp and Grunt cannot achieve.

The following shortcomings cannot be ignored:

Complex projects developed with traditional technology are not applicable: Some complex projects such as jquery, requirejs, seajs and other script modular development projects, due to unstable packaging requirements, webpack maintenance costs are extremely high.
is more intrusive: uses webpack projects, some advanced syntax features need to rely on unique syntax to achieve, to a certain extent belong to the development of webpack, requires a certain learning cost.
compatibility issues: webpack has always been facing the latest standards, many of its features need polyfills to be backward compatible, and even some features are not natively compatible with the latest browsers, so you need to pay attention when doing development.

The construction process of webpack

The construction process of Webpack is an event flow mechanism. The entire construction process can be seen as an assembly line, each link is responsible for a single task, and after processing, it will enter the next link.

Webpack will publish events in each link, so that built-in and custom plug-ins have the opportunity to intervene in the Webpack construction process and control the Webpack construction results

initialization parameters: reads and merges the parameters from the configuration file and Shell statement to get the final parameters.

starts compiling: initializes the Compiler object with the parameters obtained in the previous step, loads all configured plug-ins, and executes the object's run method to start compiling. Confirm entry: Find out all entry files according to the entry in the configuration.

compile module: starts from the entry file, calls all configured Loaders to translate the module, and then finds out the modules that the module depends on, and then recurses this step until all entry-dependent files have been processed in this step.

completes module compilation: After uses Loader to translate all modules in step 4, the final translated content of each module and the dependencies between them are obtained.

output resources: assembled into a chunk containing multiple modules according to the dependency between the entry and the module, and then each chunk is converted into a separate file and added to the output list. In this step, the output content can be modified Last chance.

output completed: After determines the output content, determine the output path and file name according to the configuration, and write the file content to the file system.

Familiar with the basic construction process of webpack, let's carry out the practical operation to build the vue project

webpack build vue project

install webpack

version used: webpack5.x

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

Install webpack and webpack-cli:

webpack-Module packaging library
webpack-cli-command line tool

Create a new src/main.js, and write console.log('hello,webpack-vue')

result：

basic configuration

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

Entry

Entry file, webpack will first compile from here

Output

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

result：

plugins

After the main.js is generated when we build the project, we need an HTML page to display, and then HTML introduces JavaScript. When we configure the bundle file to be packaged and output, it is configured with a random hash value. Each time it is manually inserted and the next update is special Trouble, the best way is to automatically package the new bundle into HTML after each build and delete the old one, so we need html-webpack-plugin and clean-webpack-plugin to help us automatically introduce and delete Historical bundle file

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

configure vue.config.js

result：

loaders

webpack recognizes css, sass, installs loader, and inserts the parsed css into the style in index.html

result：

Recognize compressed pictures and fonts

webpack recognizes the package size of pictures, videos, fonts, and reduces picture fonts. We can use url-loader to convert files smaller than the specified size to base64, and use file-loader to move files larger than the specified size to the specified location

Babel

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

When Babel executes the compilation process, it will read the configuration from the configuration file in the project root directory. Create the Babel configuration file .babelrc in the root directory