webpack具体实现–未完

本文介绍: webpack 是 We b pack 的核心模块，webpack–cli 是 We b pack 的 CLI 程序，用来在命令行中调用 Web pack。webpack–cli 所提供的 CLI 程序就会出现在 node _modules/.bin 目录当中，我们可以通过 npx 快速找到 CLI 并运行它。npx webpack 会自动从 src/index.js 文件开始打包，然后根据代码中的模块导入操作，自动将所有用到的模块代码打包到一起。

1、前端 模块 打包 工具 webpack

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

2、配置 Webp ack 的打包 过程

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

// ./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、webpa ck 构建 流程

4、loader 原理

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

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

use: [‘style–loader’, ‘css–loader’, ‘post css-loa der’]

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

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

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

5、Plugin

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

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

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

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

module.exports = ConsoleLogOnBuildWebpackPlugin;