webpack

最新推荐文章于 2022-08-29 17:59:53 发布

Tokki_

最新推荐文章于 2022-08-29 17:59:53 发布

阅读量187

点赞数

分类专栏： webpack 前端

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

webpack

2 篇文章

订阅专栏

本文深入讲解了Webpack构建工具的功能，包括代码校验、转换、模块合并、代码分割、文件优化等，以及如何配置Webpack实现自动刷新和自动发布。探讨了核心概念如Entry、Output、Loaders、Plugins和Chunk，并概述了Webpack的工作过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack的作用

构建就是把源代码转换成发布到线上的可执行JavaScrip、CSS、HTML代码，包括如下内容：

代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

webpack的配置

const path = require('path');
module.exports = {
  entry: "./app/entry", // string | object | array
  // Webpack打包的入口
  output: {  // 定义webpack如何输出的选项
    path: path.resolve(__dirname, "dist"), // string
    // 所有输出文件的目标路径
    filename: "[chunkhash].js", // string
    // 「入口(entry chunk)」文件命名模版
    publicPath: "/assets/", // string
    // 构建文件的输出目录
    /* 其它高级配置 */
  },
  module: {  // 模块相关配置
    rules: [ // 配置模块loaders，解析规则
      {
        test: /\.jsx?$/,  // RegExp | string
        include: [ // 和test一样，必须匹配选项
          path.resolve(__dirname, "app")
        ],
        exclude: [ // 必不匹配选项（优先级高于test和include）
          path.resolve(__dirname, "app/demo-files")
        ],
        loader: "babel-loader", // 模块上下文解析
        options: { // loader的可选项
          presets: ["es2015"]
        },
      },
  },
  resolve: { //  解析模块的可选项
    modules: [ // 模块的查找目录
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"], // 用到的文件的扩展
    alias: { // 模块别名列表
      "module": "new-module"
	  },
  },
  devtool: "source-map", // enum
  // 为浏览器开发者工具添加元数据增强调试
  plugins: [ // 附加插件列表
    // ...
  ],
}

从上面我们可以看到，webpack配置中需要理解几个核心的概念Entry 、Output、Loaders 、Plugins、 Chunk

Entry：指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库
Output：告诉webpack如何命名输出的文件以及输出的目录
Loaders：由于webpack只能处理javascript，所以我们需要对一些非js文件处理成webpack能够处理的模块，比如sass文件
Plugins：Loaders将各类型的文件处理成webpack能够处理的模块，plugins有着很强的能力。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。但也是最复杂的一个。比如对js文件进行压缩优化的UglifyJsPlugin插件
Chunk：coding split的产物，我们可以对一些代码打包成一个单独的chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在webpack3及以前我们都利用CommonsChunkPlugin将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中CommonsChunkPlugin被废弃，使用SplitChunksPlugin

webpack工作过程

Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。
每找到一个 Module，就会根据配置的Loader去找出对应的转换规则，对Module 进行转换后，再解析出当前 Module 依赖的 Module。这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。
最后 Webpack 会把所有 Chunk 转换成文件输出。在整个流程中 Webpack 会在恰当的时机执行Plugin 里定义的逻辑。

常用插件