Moment For Technology

14 facts about webpack4, honestly

Posted on Aug. 6, 2022, 12:04 p.m. by Jivika Grewal
Category: The front end Tag: javascript webpack

Recently, I used NUxT in my work, I found that if WEBpack learned 6, nuxT basically doesn't need to learn, there is no learning cost. Therefore, this article re-record some basic knowledge of Webpack4, the next article will configure an optimized react scaffolding, also hope you can continue to pay attention to the configuration of webP Ack means optimization, optimization, and optimization

We've published webPack4's 30 steps to build a react development environment optimized to the Max. As promised, click here

The way I learned this was basically in 3 steps:

  1. First, read these necessary configurations, as well as some loaders, some plug-ins, like Chinese text, and recite (this step is the most important).
  2. Do it, do it, do it
  3. Understand how it works

All right, here we go


Webpack can be viewed as a module baler: What it does is analyze the structure of your project, find JavaScript modules and other extension languages that browsers don't run directly (Scss, TypeScript, etc.), and package them into a format that browsers can use.

How does WebPack compare to Grunt and Gulp

There is not much comparison between Webpack and the other two. Gulp/Grunt is a tool to optimize the development process of the front end, while Webpack is a modular solution, but the advantages of Webpack make Webpack a substitute for Gulp/Grunt class tools in many scenarios.

  1. Entry: Entry, the first step in the build that Webpack performs will start with Entry, which can be abstracted into input.
  2. Module: Module, in Webpack everything is a Module, a Module corresponds to a file. Webpack recursively finds all dependent modules starting from the configured Entry.
  3. Chunk: a Chunk is a code block. A Chunk is composed of multiple modules for code merging and splitting.
  4. Loader: module converter, used to convert the original content of a module into new content as required.
  5. Plugin: Extension Plugin that injects extension logic at specific points in the Webpack build process to change the build result or do what you want.
  6. Output: Outputs the result after Webpack has gone through a series of processes and produced the final desired code.

1. Configure the structure from 0

  • Initialize the project structure

2. Configuration webpack. Config. Js

  • Create webpack.config.js in the project root directory

3. Configure the development server

4. Packaging js

5. Support the ES6 react, vue

6. Handle CSS, SASS, and CSS3 attribute prefixes

With CSS

Dynamic unload and loadCSS

Style-loader provides use() and unuse() methods for loading and unloading CSS objects

For example, implementing a requirement to switch colors with one click and modify index.js

Handle sass

Extract the CSS file as a separate file

7. Output HTML

8. Handle referenced third-party libraries and expose global variables

The webpack.ProvidePlugin parameter is in the form of key-value pairs. The key is the name of the variable used in our project, and the value is the library to which the key points

9. Code Splitting, lazy loading (loading on demand)

In plain English, loading is done when needed, such as in a scene, clicking a button to load a JS.

10. JS Tree Shaking

11. Image processing

12. Clean Plugin and Watch Mode

Clear the directory and repackage any changes

13. Distinguish between environmental variables

14. Development mode and Webpack-dev-server,proxy

Here is the end of the basic, feel helpful, might as well point a praise, inadequate, but also hope to be done

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.