SegmentFault Technology Weekly -- This Webpack has some material!

Webpack is a front-end resource loading/packaging tool that can provide various functions required by front-end engineering with relatively simple configuration.

文章推荐

"Webpack unpacking: Analysis of several key attributes about splitChunks"

It can be seen intuitively from the analysis diagram that the m1.js file is included in the three output bundle files, which indicates that there are duplicate module codes. The purpose of splitChunks is to separate the repetitive module code into separate files and load them asynchronously to save the size of the output file. There are many configuration items for splitChunks, and some descriptions in the official documents are not very clear. Here are some key configuration properties and scenario explanations to help you understand and understand how to configure splitChunks. For easy understanding and simple demonstration, the initial settings of Webpack and splitChunks are as follows

"Packaging back-end services with front-end construction tools, what did I experience"

Seeing this title, yes, I am a back-end, and I am going to write some node.js recently. I wrote the front-end before, and if I know npm build, then the back-end program written in javascript should also be npm build, okay, as a gopher, set off with a stereotype of javascript.
I'm a gopher, but I don't have a front-end wife, so I do the front-end myself. If I'm doing something wrong, please correct it in time

"Webpack basic configuration and css related loader"

This series of articles is the summary and harvest of my learning Webpack. I hope some of my learning content can help some friends who are learning Webpack. This article is the second in a series of articles, including Webpack basic configuration and css related loader

"Packaging an on-demand vue component library from 0 to 1 with Webpack"

In the development of Vue projects, we will abstract the frequently used logic or modules into components. For those components that are used by multiple projects, we can consider encapsulating them into component libraries and publishing them to npm. Every time you want to arrive, you only need to npm install xx, and you don't have to copy it back and forth. Let's start from 0 to package a vue component library.

"How to modify the file name when Webpack is packaged"

When using Webpack for project packaging, we can modify the file name or file path of different types of resources in the following ways

"It's good to separate the environment and code in Webpack"

Environment separation mainly distinguishes between local and production environments. Local debugging needs to be able to see code changes in real time, while production environments need to be compiled into specified files.
There are two ways to define configuration files for the development environment and the production environment, and define the corresponding command in package.json. The development environment and the production environment share the configuration file, and the environment is distinguished by parameters.

"In fact, it is not so difficult to compile "modular" source code with Webpack"

Browsers do not support CommonJS, and Es Module is only supported in certain scenarios, and Webpack can parse these modular codes into browser-recognized syntax. So what exactly does Webpack do with modularity? Take a look.

"Deep Analysis of Webpack 5 Persistent Cache"

Persistent caching is one of the very powerful features brought by Webpack 5. In one sentence, the build result is persistently cached to the local disk, and the secondary build (non-watch module) directly uses the result of the disk cache to skip the time-consuming processes such as resolve and build in the build process, thus greatly improving the compilation and build time. efficiency.

"Basic Construction" starts from scratch and builds a Vue-Cli based on Webpack 5

When people usually develop Vue, most of them use Vue-cli, the ready-made Vue scaffolding, for development, but after using it for so long, don’t you want to build your own Vue-cli?
Today I will take you to build a basic Vue-cli, which can also give you a deeper understanding of Webpack! I recommend everyone to follow me step by step!
Note in advance: This article only introduces the basic configuration of vue-cli. Regarding optimization and specification, I will write two more articles to explain it later.

"Analysis of Webpack Packaging JS Files"

When using projects in Webpack, we can use esModule, commonJS, and import(moduleName) for lazy loading of modules, so how does Webpack do all this?

问答推荐

• How to deploy front-end pages to the server for external clients to access
• After configuring https through WebpackDevServer to start the project, how to cancel https?
• Ask the big guy for help, the vue project puts too many image resources under public, resulting in an error when running or packaging: too many open files
• How to use Webpack to handle special files like xx.lock files
• Webpack hot update compilation error.
• How to make nodejs module private via webpack or rollupjs encrypted code?
• The source code of the vue project is lost, and now I have the files packaged by Webpack, how to parse the source code?
• How Webpack packs into a js
• After the Webpack project runs, the configuration in .env cannot be obtained, and progress is not defined
• Webpack package favicon.ico can not enter, can not be cited online?

---

PS: What technical content do you want to see, you can leave a message in the comment area~
If you have any questions, you can add Ms. WeChat~