Building a Webpack knowledge system | Youth training camp

Why learn Webpack?

• Understand the concepts, tools, and goals of front-end "engineering"
• There must always be a few people in a team who are familiar with Webpack, which can become an individual's core competitiveness to some extent.
• The only way to go for high-end front-end

Main content of the article

01.What is Webpack

but,

• Relying on manual operation, for example, there are 50 JS files... the process is cumbersome
• When there are dependencies between code files, they must be written strictly in the order of dependencies.
• The development and production environments are very similar, and it is difficult to access new TS or JS features.
• It is difficult to access tools such as Less and Sass
• JS, images, and CSS resource management models are inconsistent

These are very prominent problems in the old era and have a great impact on development efficiency. . .

The role of Webpack

Essentially a front-end resource compilation and packaging tool

• Multiple resource files are packaged into a Bundle
• 支持 Babel、Eslint、TS、CoffeScript、Less、Sass
• Supports modular processing of resource files such as css, images, etc. Supports HMR + development server
• Support continuous monitoring, continuous construction, and code separation
• Support Tree-shaking Support Sourcemap
• 。。。

02. Use Webpack

Small example

core process

1. Entrance processing
   1. Starting from entrythe file, start the compilation process
2. Dependency resolution
   1. Starting from entrythe file, orfind dependent resources according to statements such as 'require import'
3. Resource resolution
   1. According to modulethe configuration, call the resource transferer to translate non-standard JS resources such as .png.css into JS content.
4. Resource consolidation and packaging
   1. Merge and package the translated resource content into a JS file that can be run directly in the browser

Modules + Consistency

• Merge multiple file resources into one to reduce the number of http requests
• Support modular development
• Support advanced JS features
• Supports Typescript, CoffeeScript dialects to unify the processing model of images, CSs, fonts and other resources, etc...

Use Webpack

Process class configuration

Configuration overview

https://webpack.js.org/configuration/

Processing CSS

Loader

• What is the role of Loader? Why do we need to use css-loader and style-loader here?
• What are the advantages and disadvantages of this approach compared to the old days of maintaining css in HTML files?
• Have you ever come across CSS precompilation frameworks such as Less, Sass, and Stylus? How to access these tools in Webpack?

References

• https://github.com/webpack-contrib/css-loader
• Webpack Principle Series 7: How to write loader
• style-loader | webpack

Connect to Babel

Babel is a JavaScript compiler that allows developers to write code in cutting-edge JavaScript, and then Babel converts it into old-school JavaScript that more browsers can understand.

• What specific functions does Babel have?
  1. Grammar conversion: Babel can convert JavaScript code that uses the latest syntax into backward-compatible old version code to ensure that it can run normally in older browsers that do not support the new syntax.
  2. Source code conversion: Babel can convert source code that uses new APIs or syntax features into equivalent old version code so that it can run normally in environments that do not support these new features.
  3. Plug-in support: Babel supports extending its functions through plug-ins. Developers can write custom plug-ins according to their own needs to achieve specific conversions or functions.
  4. Build tool integration: Babel can be seamlessly integrated with various build tools (such as Webpack, Rollup, etc.) to automatically perform code conversion during the project build process.
• What problems do Babel and Webpack solve?
  1. Babel problem solving: Babel mainly solves the problem of JavaScript syntax compatibility. It can convert JavaScript code that uses the latest syntax into backward-compatible older version code to ensure that the code can run normally in older browsers that do not support the new syntax.
  2. Webpack problem solving: Webpack mainly solves the modular packaging problem of front-end projects. It can package each module in the project according to dependencies and generate the final static resource file for loading and execution in the browser.
• Why can the two collaborate together?
  1. Babel acts as a compiler that converts new versions of JavaScript code into old version codes. Webpack can package each module in the project into static resource files. Therefore, Babel can first convert the JavaScript code during the Webpack packaging process, and then Webpack packages it.
  2. Both Babel and Webpack support plugin mechanism. Developers can use Babel plug-ins to implement specific conversions or functions, and they can also use Webpack plug-ins to extend the functionality of Webpack. This allows the two to be integrated and expanded through plug-ins to achieve more flexible and customized functions.

About Babel

References:

• https://webpack.js.org/loaders/babel-loader/
• https://babeljs.io/
• https://babeljs.io/docs/en/babel-preset-env
• https://babeljs.io/docs/en/babel-preset-react
• https://babeljs.io/docs/en/babel-preset-typescript

Generate HTML

Compared with manually maintaining HTML content, what are the advantages and disadvantages of this automatically generated method?
https://webpack.js.org/plugins/html-webpack-plugin/

tool line

HWR

Changes appear immediately in the browser

Tree-Shaking

Tree-Shaking is used to delete Dead Code

This note record comes from the video of Fan Wenjie speaking at the Byte Youth Training Camp.