写给走近webpack的自己：webpack notebook

前言：

hello guys！注意标题~ 本文旨在记录学习、自娱自乐。
如果能帮到一些同样对webpack不甚了解的同学我会很开心，但请各路神仙勿喷勿喷哈。

webpack有哪些核心概念

1. entry：入口
2. output：出口
3. loader：转换器
4. plugin：插件

…

entry

• 定义：webpack递归的入口文件

// string方式： 单入口，打包形成一个chunk，输出一个buldle文件。trunk的名称默认是main.js 
entry: "./src/index.js", 

// array方式：多入口，所有入口文件最终只会形成一个chunk，输出出去只有【一个】bundle文件 
entry: ["./src/index.js", "./src/foo.js"], 

// object：多入口，有几个入口文件就形成几个chunk，输出几个bundle文件。此时trunk的名称就是对象key值 
entry:{ index:"./src/index.js", foo:"./src/foo.js", }

复制代码

output

• 定义：告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

  生产环境的 output 需要通过 contenthash 值来区分版本和变动，可达到清缓存的效果，而本地环境为了构建效率，则不引人 contenthash。

    output: {
        // 输出文件目录（将来所有资源输出的公共目录，包括css和静态文件等等）
        path: path.resolve(__dirname, "dist"), //默认
        // 文件名称（指定名称+目录）
        filename: "[name].[contenthash:8].js", // 默认
        // 非入口文件chunk的名称。
        chunkFilename: "[contenthash:10].chunk.js",
        // 所有资源引入公共路径前缀，一般用于生产环境，小心使用
        publicPath: "",
    },

复制代码

• filename和chunkFilename区别：

filename 指列在 entry 中，打包后输出的文件的名称。

chunkFilename 指未列在 entry 中，却又需要被打包出来的文件的名称。（如：异步懒加载）

loader

loader 是文件加载器，能够加载资源文件，并对这些文件处理后打包到指定的文件中。
通俗地讲：Webpack 自身只能理解 JavaScript 和 json 文件，loader 让 Webpack 能够处理其他文件。

1. 处理一个文件可以使用多个 loader，loader 的加载顺序和配置顺序是相反的
2. 第一个执行的 loader 接收源文件的内容作为参数，下一个 loader 接收前一个 loader 的返回值作为参数，最后一个 loader 会返回此模块的 javaScript 的源码

// 加载样式
      {
        test: /\.(css|less)$/i,
        include: path.resolve(__dirname, "../src"),
        // 多个load：从右到左，从下到上
        use: [
          "style-loader", // js模块 --> 插入dom
          "css-loader",   // css --> js模块
          "less-loader"   // less --> css
        ]
      },
复制代码

plugin

在 webpack 运行的生命周期中会广播很多的事件（ hooks中的事件监听 ），plugin 可以监听这些事件（在 apply 方法中监听 hooks 的声明周期），在合适的时机通过 webpack 提供的 api 改变输出结果 。

plugins: [
    new HtmlWebpackPlugin(),// 生成html，自动引入所有bundle
],
复制代码

⭐️ loader 和 plugin 的区别

loader 是一个转换器：把 A 文件编译转换成 B 文件，这里只做单纯的文件转换的工作

plugin 是一个扩展器：在 webpack 的打包过程中，它并不直接操作文件，在 webpack 生命周期的不同阶段执行特定操作。

webpack5新特性：module

Webpack5.0新增资源模块(asset module)，它是一种模块类型，允许使用资源文件（字体，图标等）而无需 配置额外 loader。支持以下四个配置：

1. asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
2. asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
3. asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
4. asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资 源体积限制实现。