How to understand loader and plugin in webpack

The two concepts of loader and plugin in webpack are easily confused by beginners. Here, I will briefly talk about my understanding.

For loader, it is a converter that compiles file A into file B. What is operated here is the file, such as converting A.scss or A.less into B.css. , a simple file conversion process;

For plugin, it is an expander, which enriches wepack itself. For the entire process of webpack packaging, it does not directly operate files, but It works based on the event mechanism, will listen to certain nodes in the webpack packaging process, such as

• run：开始编译
  make：从entry开始递归分析依赖并对依赖进行build
  build-moodule：使用loader加载文件并build模块
  normal-module-loader：对loader加载的文件用acorn编译，生成抽象语法树AST
  program：开始对AST进行遍历，当遇到require时触发call
  require:事件
  seal：所有依赖build完成，开始对chunk进行优化（抽取公共模块、加hash等）
  optimize-chunk-assets：压缩代码
  emit：把各个chunk输出到结果文件

By monitoring the nodes, we can find the appropriate nodes to process the files appropriately.

The above is the detailed content of How to understand loader and plugin in webpack. For more information, please follow other related articles on the PHP Chinese website!