Webpack

webpack

webpack 的打包整体流程

1. 输入

从文件系统中读取代码

• entry:用于定义项目的入口，webpack会从这些入口文件中找到所有文件
• context: 定义项目的执行上下文

2.模块递归处理

调用Loader 转译Module内容，并将结果转换为AST，从中分析出模块依赖关系，进一步递归调用模块处理过程，直到所有依赖文件都处理完毕；

• resolve: 用于配置模块路径的解析规则，可以帮助webpack更精确更高效找到指定模块；
• module: 配置模块加载规则，loaders
• externals: 申明资源之间的关系。用externals声明的外部资源，webpack会进行忽略。

3. 后处理

后处理：所有模块递归处理完毕后开会执行后处理，包括模块合并、注入运行时、产物优化等，最终输出Chunk 集合

• optimization 用于控制如何优化产物包体积，scope hoisting，code splitting，代码混淆，代码压缩。
• target 用于配置编译产物的目标环境，web，node，electron
• mode dev prod 环境下的声明
• output 输出，产出物

webpack 首先要根据输入配置找到项目的文件入口。根据模块递归处理规则逐一处理模块文件，处理的过程包括转译，依赖分析等模块处理完成后，再根据后处理规则，决定如何产出。

Webpack 的其他开发效率类

• devtools 决定着我们 sourcemap 的生成规则
• Devserver HMR
• watch 模式，用于配置持续监听文件的变化
• cache webpack 5 以后缓存编译信息

loader 的相关知识

babel-loader

css-loader

为啥有css loaders? 因为原生的webpack是不能识别css语法的，假如我们不做配置直接导入.css文件会失败。所以在webpack中处理css文件通常需要用到：

css-loader

它会将css翻译成类似 module.exports = ` ${css} `的JS代码，让CSS文件可以和JS一样作为资源。同时可以提供sourcemap，css-in-module，

style-loader

在具体的产物中，注入runtime代码，让这些代码将css注入到页面中

less/sass-loader

通过原本的less / sass 的解析器，解析然后生成css

postcss-loader

CSS界的babel

file-loader

经过file-loader 处理后，原始图片会被重命名并复制到产物文件夹，同时在代码里插入图片url

url-loader

对于小于阈值的图片，直接base 64编码

raw-loader

都不处理，直接拷贝，一般svg会用到

写一个less-loader

    const less = require('less');
    module.exports = function loader(source) {
      console.log(source);
      const callback = this.async();
      less.render(source, {
        sourceMap: {}
      }, function (err, res) {
        let { css, map } = res;
        console.log(source, css);
        callback(null, css, map)
      })
    }

plugin

常见的plugins

• terser-webpack-plugin //压缩js
• pnp-webpack-plugin //Yarn plug Play 插件
• html-webpack-plugin //自动生成带有入口文件的index.html模板注入
• mini-css-extract-plugin
• define-plugin
• friendly-error-webpack-plugin //友好的错误日志