1. 打包 css

- use: ['style-loader', 'css-loader']
- loader执行顺序：先右后左(先下后上)
- css-loader: 按照common规范将样式文件 输出到js中
- style-loader: 将js中的样式，挂载到<style>标签中
- css 单独成独立的文件 mini-css-extract-plugin
- 添加样式前缀，postcss-loader，autoprefixer
- 校验css格式：stylelint,stylelint-config-standard,stylelint-webpack-plugin
- css压缩：optimize-css-assets-webpack-plugin

2. 打包 html

• html-webpack-plugin：
  • 生成 HTML 文件（用于服务器访问），并在 HTML 中加载所有的打包资源
  • 指定 html 模版，设置 html 变量，压缩 html

3. 打包 js

• babel 转换语法
  • @babel/preset-env(只能转换基本语法)
  • @babel/ployfill（转换所有 js 新语法）
  • core-js(按需转译)
• js 代码格式校验规：
  • eslint eslint-config-airbnb eslint-webpack-plugin eslint-plugin-import

4. 打包图片

• file-loader
• url-loader（图片小于配置大小，转为 base64 ）
• html-loader：将 html 导出为字符串，（负责引入 img，从而能被 url-loader 进行处理）

资源兼容性问题

html-loader 与 html-weback-plugin 冲突，原因是：htmlwebpackPlugin 会检查目标文件是否已经有 loader 处理，如果有其他 loader 处理，htmlWebpackPlugin 不再使用 lodash.template 去处理 ejs 语法。

5. 打包字体

v4:

{
    test: /\.(eot|svg|ttf|woff|woff2)$/i,
    use: {
        loader: 'file-loader',
        options: {
            name: 'fonts/[name].[ext]'
        }
    }
}

v5

{
    test: /\.(eot|svg|ttf|woff|woff2)$/i,
    type: "asset",
    parser: {
      dataUrlCondition: {
        maxSize: 8 * 1024,
      },
    },
    generator: {
      filename: "fonts /[name].[ext]",
    },
}

6. 资源模块

• 功能：

  • 资源模块是一种模块类型，它允许使用资源文件，而无需配置额外 loader
  • 资源文件：字体，图片，图标，HTML...

• v4 vs v5

提示

webpack4:

• raw-loader (将文件导入为字符串)
• file-loader (将文件发送到输出目录)
• url-loader(将文件发送到输出目录，或转为 Data Url 内联到 bundle)

webpack5

• asset/resource 发送一个单独的文件并导出 URL（之前通过 file-loader）
• asset/inline 导出一个资源的 data URL（之前通过使用 url-loader）
• asset/source 导出资源的源代码（之前通过 raw-loader）
• asset：在导出一个 data URL 和发送一个单独的文件之间自动选择（url-loader）

asset 可以在 asset/resource 和 asset/inline 之间进行切换。 如果小于 8kb，使用 asset/inline 如果大于 8kb，使用 asset/resource

7. 开发服务器

• 作用：发布 web 服务，提高开发效率
• 使用：
  • webpack4: webpack-dev-server
  • webpack5: webapck serve
• 热更新
  • webpack4
    • hot: true
  • webpack 5
    • liveReload: true(禁用 hot)
    • target: "web"(热更新只适应于 web 相关的 targets)
• Proxy（配置接口代理）

8. ssr

渲染: HTML + CSS + JS + Data -> 渲染后的 HTML

服务端：

• 所有模板等资源都存储在服务端
• 内⽹机器拉取数据更快
• ⼀个 HTML 返回所有数据

浏览器和服务器交互流程

客户端渲染 vs 服务端渲染

服务端渲染 (SSR) 的核⼼是减少请求

	客户端渲染	服务端渲染
请求	多个请求（HTML， 数据等）	1个请求 ｜
加载过程	HTML/ 数据 串行加载	一个请求返回 html& 数据
渲染	前端渲染	后端渲染 ｜

SSR 的优势:

• 减少⽩屏时间
• 对于 SEO 友好