Webpack 概念

一直想深入学学 Webpack，无奈被其他技术的学习一直耽搁了，对于 Webpack 还仅仅停留在会使用的阶段中，以前刚开始时尝试深入过，但因为未曾有过很好的模块开发经验而对很多功能不是理解，强烈建议还是有些项目的开发流程在脑中才有必要去深入 Webpack

现如今个人很喜欢边学边记，一方面是为了保留零碎的知识点，也是为自己创立个在线的 API，然而最近花出了很多的时间在恶补英语，可能每天来学技术的时间并不是很多，也并不基于快速的将其学会，重在积累！

本文只是我学习的个人总结，基本都是从官网以及各种材料上将自己觉得重要又不是很了解的知识点进行记录，以简短精华为核心，想必应该并不会适合新手作为学习的阅读材料，反而应该适合对 Webpack 有过一半以上的了解并作为复习或填补深度

这一篇只是初步的尝鲜，既然决定深入 webpack，那肯定要用多个篇幅来详细分析

一. 入口（Entry）

1. 单个入口

• entry: string | Array<string>
• entry: { main: string | Array<string> }
• entry 为路径数组时也是单个入口，是将所有路径文件打包为一个

2. 对象语法

• entry: { [entryChunkName: string]: string | Array<string> }

二. 输出（Output）

• output: {
    filename: string,
    path: string,
  },
  

• 可以使用以下占位符
  • [name]
  • [hash]

三. 解析器（Loader）

• module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: { modules: true },
          },
        ],
      },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
  

• 可以在 import 或任何等效于 import 的方式中指定 loader，使用 ! 将资源中的 loader 分开
• Loader 特性
  • loader 支持链式传递，能够对资源使用流水线，一组链式的 loader 将按照先后顺序进行编译，loader 链中的第一个 loader 返回值给下一个 loader，在最后一个 loader ，返回 webpack 所预期的 JavaScript
  • loader 可以是同步的，也可以是异步的
  • loader 运行在 Node.js 中，并且能够执行任何可能的操作
  • loader 接收查询参数，用于对 loader 传递配置
  • 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，需要在 package.json 里定义一个 loader 字段
  • loader 能够产生额外的任意文件
• loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写（如何编写 loader？）
• loader 列表

四. 插件（Plugins）

• plugins: [ new Plugins(), ]
• webpack 插件是一个具有 apply 属性的 JavaScript 对象，apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问
• 由于插件可以携带参数或选项，必须在 webpack 中，向 plugins 属性传入 new 实例

五. 模块解析（Module Resolution）

1. 绝对路径

• 由于已经取得绝对路径，因此不需要进一步再做解析

2. 相对路径

• 使用 import 或 require 的资源文件所在的目录被认为是上下文目录，以此产生绝对路径

3. 模块路径

• 模块将在 resolve.modules 中指定的所有目录内搜索，你可以替换初识模块路径，此替换路径通过使用 resolve.alias 配置选项来创建一个别名
• 一旦根据上述规则解析路径后，解析器将检查路径是否指向文件或目录，如果路径指向一个文件：
  • 如果路径具有文件扩展名，则被直接将文件打包
  • 否则，将使用 resolve.extensions 选项作为文件扩展名来解析，此选项告诉解析器在解析中能够接受哪些扩展名（例如 .js）
• 如果路径指向一个文件夹，则采取以下步骤找到具有正确扩展名的正确文件：
  • 如果文件夹中包含 package.json 文件，则按照顺序查找 resolve.mainFields 配置选项中指定的字段，并且 package.json 中的第一个这样的字段确定文件路径
  • 如果 package.json 文件不存在或者 package.json 文件中的 main 字段没有返回一个有效路径，则按照顺序查找 resolve.mainFiles 配置选项中指定的文件名，看是否能在 import/require 目录下匹配到一个存在的文件名
  • 文件扩展名通过 resolve.extensions 选项采用类似的方法进行解析

六. 构建目标（Targets）

• target: string
• 因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标，可以在 webpack 配置中设置