webpack_02 (loader)

加载Css  css-loader

#css-loader的安装  
npm install css-loader -D

#内联方式  
import "css-loader!../css/style.css";

#配置方式 webpack.config.js
module: {
    rules: [
      {
        test: /\.css$/,
        // loader: "css-loader",
        // use: ["css-loader"],
        use: [
          { loader: 'css-loader'}
        ]
      }
    ]
  }

style-loader 让css生效

#style-loader安装
npm install style-loader -D

#因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将styleloader写到css-loader的前面
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'less-loader']
}

处理less

#使用less工具来编译转换成css
npm install less -D
npx lessc ./src/css/title.less title.css

less-loader处理
#安装
npm install less-loader -D

#配置
{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
}

PostCSS

以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；

如何使用PostCSS呢？主要就是两个步骤：
第一步：查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader；
第二步：选择可以添加你需要的PostCSS相关的插件；

参考  https://autoprefixer.github.io/

#安装工具postcss-cli
npm install postcss postcss-cli -D

 插件autoprefixer

#安装
npm install autoprefixer -D
#直接使用使用postcss工具，并且制定使用autoprefixer
npx postcss --use autoprefixer -o end.css ./src/css/style.css

　

webpack插件 postcss-loader

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [require('autoprefixer')]
    }
  }
}

postcss-loader 可以单独引入postcss.config.js，

postcss-preset-env 内置 autoprefixer 

module.exports = {
    plugins: [require('postcss-preset-env')]
}
#plugins: [require('autoprefixer')]

 

加载图片

img元素，设置src属性；
其他元素（比如div），设置background-image的css属性；

 

file-loader

帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中

options: {outputPath} 设置输出的文件夹

[ext]： 处理文件的扩展名

[name]：处理文件的名称；

[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；

[path]：文件相对于webpack配置文件的路径；

#安装file-loader
npm install file-loader -D

#配置
{
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name]_[hash:8].[ext]'
            }
          }
        ]
      }

url-loader

它和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI

小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；

#安装url-loader
npm install url-loader -D

#配置
{
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'img/[name]_[hash:8].[ext]',
              limit: 10 * 1024
            }
          }
        ]
      }

 

认识asset module type

在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；
在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现；
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现；

 

#自定义文件的输出路径和文件名呢？
#方式一：修改output，添加assetModuleFilename属性；
#方式二：在Rule中，添加一个generator属性，并且设置filename；
{
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset',
        generator: {
          filename: 'img/[name]_[hash:6][ext]' //命名规则
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024 //url-loader limit
          }
        }
      },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: 'asset/resource',
        generator: {
          filename: 'font/[name]_[hash:6][ext]'
        }
      }