likes
comments
collection
share

你对 Webpack 了解多少？

作者站长头像
站长
· 阅读数 68

前言

说到 webpack，很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎每一个大型项目中都会用到它，陌生是因为对它复杂的配置和各种功能感到陌生。那今天我们就一起来了解一下 webpack 的工作流程及其作用。

webpack 的作用

从官网的描述进行归纳，webpack 的作用有以下几点：

  • 模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。
  • 编译兼容。通过 webpack 的 Loader 机制，不仅可以帮助我们对代码做polyfill，还可以编译转换诸如 .less, .scss, .vue, .jsx 等这些在浏览器中无法识别的文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。
  • 能力扩展。通过 webpack 的 Plugin 机制，让我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

webpack 的打包流程

首先我们来简单了解一下 webpack 的打包流程：

  1. 读取 webpack 的配置参数(通过 webpack.config.js 文件读取)。

  2. 启动 webpack，创建 Compiler 对象并开始解析项目。

  3. 从入口文件开始解析，并且找到其中导入的依赖模块，递归遍历分析，形成依赖树。

  4. 对不同文件类型的依赖模块文件使用对应的 Loader 进行编译，最终转为 JS 文件。

  5. 整个过程中 webpack 会通过发布订阅模式，向外抛出一些 hooks，而webpack 的插件通过监听这些关键的事件节点，执行插件任务进而达到干预输出结果的目的。

在 webpack 的打包过程中，Loader 和 Plugin 发挥着非常重要的作用，下面就让我们来了解一下它们。

webpack 中的 Loader

在 webpack 的内部默认只能处理 JS 模块代码，在打包过程中，会默认把所有遇到的文件都当作 JavaScript 代码进行解析，因此当项目存在非 JS 类型文件时，我们需要先对其进行必要的转换，才能继续进行打包，这也是 Loader 存在的意义。

Loader 可以协助 webpack 打包处理特定的文件模块。比如：

  • css-loader 可以打包处理 .css 相关的文件
  • less-loader 可以打包处理 .less 相关的文件
  • babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

css-loader

安装处理 css 文件的 loader，命令如下:

npm i style-loader css-loader -D

在 webpack.config.js 文件的 module -> rules 数组中，添加 loader 规则：

module.exports = {
  module: {
    // test 表示匹配的文件类型，use 表示对应要调用的 loader
    rules: [{ test: /.css$/, use: ["style-loader", "css-loader"] }];
  }
}

注意：use 数组中指定的 loader 顺序是固定的，从后往前调用。

less-loader

安装处理 less 文件的 loader，命令如下：

npm i less less-loader -D

在 webpack.config.js 文件的 module -> rules 数组中，添加 loader 规则：

module.exports = {
  module: {
    // test 表示匹配的文件类型，use 表示对应要调用的 loader
    rules: [{ test: /.less$/, use: ["style-loader", "css-loader", 'less-loader'] }];
  }
}

babel-loader

安装处理 JS 高级语法的包，命令如下：

npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D

在 webpack.config.js 文件的 module -> rules 数组中，添加 loader 规则：

{
  test: /.js$/,
  // exclude 为排除项
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {  // 通过 options 属性指定参数项
      plugins: ['@babel/plugin-proposal-class-properties']
    }
  },
}

webpack 中的 Plugin

Plugin 负责 webpack 的功能扩展。webpack 基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的任务，从而实现自己想要的功能。下面是 webpack 中两种常用的插件：

webpack-dev-server

webpack-dev-server 类似于 node 中用到的 nodemon 工具，每当修改了源代码，webpack 会自动进行项目的打包和构建。

配置 webpack-dev-server：

"scripts": {
  "dev": "webpack server"
}

webpack-dev-server 生成到内存中(提高了实时打包输出的性能，因为内存比物理磁盘速度快很多)的文件，默认放到了项目的根目录中，是不可见的。

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置：

module.exports = {
  devServer: {
    open: true, // 初次打包完成后，自动打开浏览器
    host: "127.0.0.1", // 实时打包所用的主机地址
    port: 80, // 实时打包所用的端口号
  },
};

html-webpack-plugin

html-webpack-plugin 是 webpack 中的 html 插件，类似于一个模板引擎插件，可以通过此插件定制 index.html 页面的内容。

配置 html-webpack-plugin：

const HtmlPlugin = require("html-webpack-plugin");

// 创建 HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin({
  template: "./src/index.html", // 指定源文件的存放路径
  filename: "./index.html", // 指定生成的文件存放路径
});

module.exports = {
  mode: "development",
  plugins: [htmlPlugin], // 通过 plugins 节点，使 htmlPlugin 插件生效
};

通过 html 插件复制到项目根目录中的 index.html 文件，也被放到了内存中。html 插件在生成的 index.html 页面的底部，自动注入了打包的 bundle.js 文件。

最后

以上就是笔者对 webpack 的简单介绍，如果觉得对你有帮助的话，不要忘了点赞哟~

转载自:https://juejin.cn/post/7225584540771958842
评论
请登录