webpack具体实现--未完

news2024/11/25 20:42:06

1、前端模块打包工具webpack

webpack 是 Webpack 的核心模块，webpack-cli 是 Webpack 的 CLI 程序，用来在命令行中调用 Webpack。webpack-cli 所提供的 CLI 程序就会出现在 node_modules/.bin 目录当中，我们可以通过 npx 快速找到 CLI 并运行它。npx webpack 会自动从 src/index.js 文件开始打包，然后根据代码中的模块导入操作，自动将所有用到的模块代码打包到一起。之后项目的根目录下多出了一个 dist 目录，我们的打包结果就存放在这个目录下的 main.js 文件中。

2、配置 Webpack 的打包过程

在项目的根目录src下添加一个 webpack.config.js，webpack.config.js 是一个运行在 Node.js 环境中的 JS 文件，也就是说我们需要按照 CommonJS 的方式编写代码，这个文件可以导出一个对象，我们可以通过所导出对象的属性完成相应的配置选项。

// ./webpack.config.js
import { Configuration } from 'webpack'  //代码提示
/**
 * @type {Configuration}
 */
const config = {
  entry: './src/index.js',
//resolve 配置是帮助 Webpack 查找依赖模块的，通过 resolve 的配置，
//可以帮助 Webpack 快速查找依赖，也可以替换对应的依赖
  output: {
    filename: 'bundle.js'
    path: path.join(__dirname, 'output')
  },
//resolve.extensions是帮助 Webpack 解析扩展名的配置
 resolve: {
     extensions: ['.js', '.json', '.css'],
     alias: {
            src: path.resolve(__dirname, 'src'),
            '@lib': path.resolve(__dirname, 'src/lib')
        }
  },
//
 mode: 'development',
}
module.exports = config

3、webpack 构建流程

4、loader原理

Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。

sass-loader与less-loader将代码转换成css。postcss-loader将CSS文件自动添加浏览器前缀。css-loader :允许将css文件通过require的方式引入，并返回css代码，然后将 css 资源转为 CommonJS 的 JS 模块。style-loader将 CommonJS 模块生成一个 style 标签插入到最终的文档中。

use: ['style-loader', 'css-loader', 'postcss-loader']

file-loader 支持在 JS 模块中引入诸如 png、jpg、svg 等文本或二进制文件，并将文件写出到输出目录

url-loader 可以识别图片的大小，当文件小于给定的阈值时把图片转换成内联的base64 URL，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

vue-loader是用于处理单文件组件。 script 块中的内容被作为 js 处理，对所有*.js 配置了 babel-loader。需要用 Vue 模板编译器编译 template，从而得到 render 函数。需要对<style scoped>中的 CSS 做后处理（post-process），该操作在 css-loader 之后但在 style-loader 之前

5、Plugin

Plugin就是插件，基于事件流框架Tapable，插件可以扩展 Webpack 的功能，基于发布订阅模式（类似于eventbus),在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

Plugin从本质上来说，就是一个具有apply方法Javascript对象。apply 方法会被 webpack compiler 调用，并且在整个编译生命周期都可以访问 compiler 对象。

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 构建过程开始！');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

- entry-option ：初始化 option

- compile：真正开始的编译，在创建 compilation 对象之前

- compilation ：生成好了 compilation 对象

- make：从 entry 开始递归分析依赖，准备对每个模块进行 build

- after-compile：编译 build 过程结束

- emit ：在将内存中 assets 内容写到磁盘文件夹之前

- after-emit ：在将内存中 assets 内容写到磁盘文件夹之后

- done：完成所有的编译过程 - failed：编译失败的时候

参考：谈谈你对Webpack的理解 - 掘金 (juejin.cn)