Webpack

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

---

# loader

定义:loader 可以用于对模块的源代码进行转换

1. css-loader 的使用方案有三种使用方案
   1. 内联方式

      import "css-loader!../css/index.css";   

   2. CLI 方式 (webpack 已经不使用)

      webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

   3. 配置方式 (在使用多个 loader 时需要注意，webpack 加载 loader 的顺序是从后向前加载的，从下往上，从右往左)
      1. npm install css-loader -D 安装 css-loader

         module: {
           rules: [
             {
               // 匹配相关文件资源，规则使用正则表达式编写
               test:/\.css$/i,
               // 使用相对应loader进行解析相应的模块
               // loader:"css-loader"
               // use:"css-loader"
               use:[
                 {loader:"style-loader"},
                 {loader:"css-loader"}
               ]
             }
           ]
         }

   4. css-loader的importLoaders属性

      module: {
        rules: [
          {
            test:/\.css$/i,
            use:[
              {loader:"style-loader"},
              {
                loader:"css-loader",
                options:{
                  importLoaders:1
                }
              },
              {loader:"postcss-loader"}
            ]
          },
          {
            test: /\.less$/i,
            use:[
              {loader:"style-loader"},
              {
                loader:"css-loader",
                options:{
                  importLoaders:2
                }
              },
              {loader:"postcss-loader"},
              {loader:"less-loader"}
            ]
          }
        ]
      }

注意：出现 CSS 文件嵌套引用时，需要使用 importLoaders 属性，因为 webpack 加载 loader 的顺序是从后往前，使用该属性后可以重新倒回去再次使用后面的 loader，使用的数量根据属性值决定

2. style-loader 的使用
   1. npm install style-loader -D 安装 style-loader
   2. 使用 document.createElement(style) 方式在 head 中创建 style 标签，使用 css 嵌入方式编写样式
3. less-loader 的使用
   1. npm install less -D 安装 less 工具，实现 less 转换为 css
   2. npm install less-loader -D 安装 less-loader
   3. webpack.config.js 编写 loader

      module: {
        rules: [
          {
            test: /\.less$/i,
            use:[
              {loader:"style-loader"},
              {loader:"css-loader"},
              {loader:"less-loader"}
            ]
          }
        ]
      }

4. file-loader 的使用
   1. npm install file-loader -D 安装 file-loader, 处理 png 、 jpg 等格式的图片，处理 import/require()方式 引入的文件资源，且会将该资源放到输出的文件夹中
   2. 引入图片的两种形式

      <!-- 第一种方式 -->
      import 图片名 from "图片路径";
      <!-- 第二种方式 -->
      background-image:url(文件路径);

   3. img 文件夹里面的图片经过 MD4算法(散列函数处理)|(摘要算法:提取文件名核心值) 生成 128bit 比特位哈希值路径 (32 个十六进制)
   4. 文件名和文件路径设置

      {
        test:/\.(png|jpe?g|gif|svg)$/,
        use:[
          {
            loader:"file-loader",
            options:{
              // 使用占位符placeholder,name:"[placeholder]"
              name:"img/[name].[hash:8].[ext]",
              // outputPath:"img",
              esModule:false
            }
          }
        ],
        type:"javascript/auto"
      }

   5. 常用的 placeholder
      1. [ext] : 处理文件的扩展名
      2. [name] : 处理文件的名称
      3. [hash] : 文件的内容，使用 MD4 散列算法处理
      4. [contentHash] : 在 file-loader 中效果和 [hash] 结果一致，其他可能会不同
      5. [hash:<length>] : 截取 hash 长度，默认 32 个字符太长
      6. [path] : 文件相对于 webpack 配置文件的路径
5. url-loader 的使用
   1. npm install url-loader -D 安装 url-loader
   2. 工作方式与 file-loader 相似，但是可以将较小的文件转成 base64 的 URI (base64 data)
   3. 注意：小图片转换 base64 和页面直接一起请求，减少不必要的请求过程；大图片直接使用图片即可，若大图片也进行转换会影响页面的请求速度
   4. limit属性 图片大小的最大值，小于该值就可以转换为 base64 嵌入打包文件里面，单位是字节 (Byte)

      {
        test:/\.(png|jpe?g|gif|svg)$/,
        use:[
          {
            loader:"url-loader",
            options:{
              name:"img/[name].[hash:8].[ext]",
              limit:160 * 1024,
              esModule:false
            }
          }
        ],
        type:"javascript/auto"
      }

      raw-loader : 将一些内容转换为字符串