file-loader

处理静态资源模块

原理是把打包⼊⼝中识别出的资源模块，移动到输出⽬录，并且返回⼀个地址名称

场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬录，就可以使⽤file-loader来处理，txt，svg，csv，excel，图⽚资源等

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/,
      //use使⽤⼀个loader可以⽤对象，字符串，两个loader 需要⽤数组
      use: {
        loader: "file-loader",
        // options额外的配置，⽐如资源名称
        options: {
          // placeholder 占位符 [name]⽼资源模块的名称
          // [ext]⽼资源模块的后缀
          // https://webpack.js.org/loaders/file-loader#placeholders
          name: "[name]_[hash].[ext]",
          //打包后的存放位置
          outputPath: "images/",
        },
      },
    },
  ],
}

url-loader

url-loader内部使⽤了file-loader,所以可以处理file-loader所有的事情，但是遇到jpg格式的模块，会把该图⽚转换成 base64 格式字符串，并打包到 js ⾥。对⼩体积的图⽚⽐较合适，⼤图⽚不合适。

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/,
      use: {
        loader: "url-loader",
        options: {
          name: "[name]_[hash].[ext]",
          outputPath: "images/",
          //⼩于2048，才转换成base64
          limit: 2048,
        },
      },
    },
  ],
},

样式处理

css-loader 分析 css 模块之间的关系，并合成⼀个 css
style-loader会把css-loader⽣成的内容，以 style 挂载到⻚⾯的heade部分

less-loader 把 less 语法转换成 css

{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]// 多个loader 是有执行顺序的，自后往前
}

CSS内联：

借助 style-loader
使用 html-inline-css-webpack-plugin插件

参考：https://blog.csdn.net/kaimo313/article/details/106972917/

postcss-loader

https://caniuse.com/

使用 autoprefixer 自动添加浏览器前缀

npm i postcss-loader autoprefixer -D

//webpack.config.js
{
 test: /\.css$/,
 use: ["style-loader", "css-loader", "postcss-loader"]
},
//postcss.config.js
module.exports = {
 plugins: [
  require("autoprefixer")({
    overrideBrowserslist: ["last 2 versions", ">1%"]
 })
 ]

px2rem-loader

⻚⾯渲染时计算根元素的 font-size 值，可以使⽤⼿淘的lib-flexible库 https://github.com/amfe/lib-flexible

raw-loader

A loader for webpack that lets you import files as a string.

使用0.5.1的版本npm i raw-loader@0.5.1 -D

raw-loader 内联 html

<head>${require('raw-loader!./meta.html')}</head>

raw-loader内置 JS ```html

```