Webpack

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.

---

# 浏览器兼容性

1. browserslist 工具：查询浏览器版本，一个在不同的前端工具之间，共享目标浏览器和 Node.js 版本的配置 (Babel、Autoprefixer、postcss-preset-env 等)
2. browserslist 编写规则
   1. defaults:Browserslist 的默认浏览器
   2. 5%: 通过全局使用情况统计的信息选择浏览器版本
   3. dead:24 个月没有官方支持或更新的浏览器
   4. last 2 version: 每一个浏览器的最后 2 个版本
   5. not ie <=8: 排除先前查询选择的浏览器
   6. node 10: 选择最新的的 node.js 版本 (如 current node:Browserslist 现在使用的 Node.js 版本)
   7. iOS 7: 直接使用 iOS 浏览器版本 7
   8. supports es6-module: 支持特定功能的浏览器
3. browserslist 工具使用 caniuse-lite 工具进行条件查询
   1. , 、 or : 并集，满足一个即可
   2. and : 交集，所有条件都要满足
   3. not : 取反
4. 在多个 browserslist 共享查询条件时，两种编写方式
   1. 在 package.json 文件里面添加字段

      "browserslist": [
      ">1%",
      "last 2 version",
      "not dead"
      ]

   2. 新建 .browserslistrc 文件

      >1%,
      last 2 version,
      not dead

注意：浏览器版本查询的依赖网站:https://caniuse.com/

# postcss

定义：一个通过 JavaScript 来转换样式的工具，但是要实现特定的功能需要借助与 postcss 相应的插件 (如自动添加浏览器前缀，css 样式重置)

1. postcss 的使用
   1. 查找 postcss 在构建工具中的扩展，如 webpack 中的 postcss-loader
   2. 选择添加需要的 postcss 相关插件实现相应的功能
2. 在命令行中使用 postcss

   // 安装postcss工具
   npm install postcss -D
   // 安装postcss命令行工具
   npm install postcss-cli -D
   // 使用postcss工具对test.css文件中样式进行处理，生成目标文件result.css
   npx postcss -o result.css ./src/css/test.css
   //安装`autoprefixer`插件为了给样式添加浏览器前缀
   npm install autoprefixer -D
   //`--use autoprefixer`指定使用特性插件
   npx postcss --use autoprefixer -o result.css ./src/css/test.css

注意：推荐查询样式适配浏览器的网站:https://autoprefixer.github.io/(告诉你是否需要添加相应的前缀)

1. 在 webpack 中使用 postcss

   // 安装postcss工具
   npm install postcss -D
   // 安装postcss-loader
   npm install postcss-loader -D
   //安装`autoprefixer`插件为了给样式自动添加浏览器前缀
   npm install autoprefixer -D
   //安装`postcss-preset-env`插件为了使CSS新特性适配大部分浏览器
   npm install postcss-preset-env -D

2. postcss-preset-env : 讲一些现代 CSS 特性转成大多数浏览器识别的 CSS，且根据目标浏览器或者运行时环境添加所需的 polyfill
   1. postcss-preset-env 插件已经包含 autoprefixer 插件的特性 (自动为浏览器添加前缀)
   2. rgb (#000000):6 位；rgba (#00000000):8 位部分浏览器可以解析识别，最后两位表示透明度
   3. 在 webpack 中使用 postcss 工具时，使用相同的插件时可以进行相同的 插件代码抽离 ，只需新建文件 postcss.config.js (特定文件名), 在该文件里面添加以下代码

      //对webpack中的postcss工具使用postcss-preset-env插件配置单独抽离
      module.exports = {
        plugins:[
          require("postcss-preset-env")
          // 该插件可以简写为以下形式，但并不是所有的插件都可以写成简写形式
          // "postcss-preset-env"
        ]
      }

# 资源模块类型 (asset module type)

1. 4 种新的模块类型
   1. asset/resource : 发送一个单独的文件并导出 URL, 相当于 file-loader 的作用

      {
        test:/\.(png|jpe?g|gif|svg)$/,
        type:"asset/resource",
        generator: {
          filename:"img/[name].[hash:6][ext]"
        }
      }

      附加：加载字体文件 (阿里图标库)

      {
        test:/\.ttf|eot|woff2?$/i,
        type:"asset/resource",
        generator:{
          filename:"font/[name].[hash:6][ext]"
        }
      }

   2. asset/inline : 导出一个资源 data URL, 相当于 url-loader 的作用

      {
        test:/\.(png|jpe?g|gif|svg)$/,
        type:"asset/inline"
      }

   3. asset/source : 导出资源的源代码，相当于 raw-loader 的作用
   4. asset : 在导出一个 data URL 和发送一个单独文件之间自动选择，相当于 url-loader 的作用，且配置资源体积限制实现 (大小图片进行筛选)

      {
        test:/\.(png|jpe?g|gif|svg)$/,
        type:"asset",
        generator: {
          filename:"img/[name].[hash:6][ext]"
        },
        parser:{
          <!-- `url-loader`的limit效果 -->
          dataUrlCondition:{
            maxSize:160 * 1024
          }
        }
      }

2. 将图片放入对应的文件夹里面的两种方式
   1. 在 output 中进行配置

      output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "build"),
      assetModuleFilename:"img/[name].[hash:6][ext]"
      }

   2. 在 rules 中配置

      {
        test:/\.(png|jpe?g|gif|svg)$/,
        type:"asset/resource",
        generator: {
          filename:"img/[name].[hash:6][ext]"
        }
      }

# Plugin (每一个 plugin 是一个类)

1. 定义: Loader 用于特定模块类型进行转换； Plugin 用于执行更加广泛的任务 (打包优化、资源管理、环境变量注入)
2. Plugin
   1. 安装 clean-webpack-plugin : 修改一些配置后自动生成 dist 文件夹进行替换

      <!-- 第一步引入需要的plugin -->
      const { CleanWebpackPlugin } = require("clean-webpack-plugin");
      <!-- 第二步使用需要的plugin -->
      plugins: [
        new CleanWebpackPlugin()
      ]

   2. 安装 html-webpack-plugin : 根据 ejs模板 自动生成 index.js 文件，并引入相关文件；ejs 模板里面可以设置 options.title 属性，即为生成 index 文件的标题；自定义 HTML 模板，新建 public 文件夹，在里面新建 HTML 文件，使用 template 进行引入即可；自定义模板数据填充，使用 <% 变量 %> ，该方式是 ejs 模板填充数据的方式

      <!-- 第一步引入需要的plugin -->
      const { CleanWebpackPlugin } = require("clean-webpack-plugin");
      <!-- 第二步使用需要的plugin -->
      plugins: [
        new CleanWebpackPlugin({
          title:"自定义index文件的标题名",
          template:"./pubilc/index.html"
        })
      ]

   3. 安装 define-plugin : 解决 BASE_URL的常量 无法找到问题，区分开发与生产环 境，区分 mode 模式等，允许编译时创建配置的全局常量，属于 webpack 内置插件，无需安装

      <!-- 第一步进行引入 -->
      const { DefinePlugin } = require("webpack");
      <!-- 第二步使用 -->
      plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
          title:"XGG",
          template:"./public/index.html"
        }),
        new DefinePlugin({
          BASE_URL:'"./"'
        })
      ]

   4. 安装 copy-webpack-plugin : 将指定文件夹里面的文件复制到另一个文件夹

      plugins: [
        new CopyWebpackPlugin({
          patterns:[
            {
              from:"public",
              // 可以省略不写，默认会复制到output中生成的文件夹
              // to:"build",
              // 可以忽略不进行复制的文件
              globOptions:{
                // ignoreFiles:"index.js"
                ignore:[
                  "**/index.html",
                  // 若是Mac的话也需要忽略该文件,该文件是记录当前文件夹的状态信息
                  "**/.DS_Store",
                  "**/test.txt"
                ]
              }
            }
          ]
        })
      ]