02-处理资源

前言：

  webpack的核心是一个现在JavaScript应用程序的静态模块的打包工具。它在处理应用程序的时候，在内部构建一个依赖关系图，这个图会映射项目所需要的每一个模块，同时生成一个或多个bundles。

注意：

   webpack本身可以识别和处理的资源类型是有限的，主要是JavaScript/JSON。

  无法直接处理以下资源，需要借助第三方loader

一、样式资源

1、处理样式资源

 module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader',],
      },
    ],
  },`

2、处理样式预处理器

 module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader','css-loader', 'less-loader'], //将less文件转化为css文件
      },
    ],
  },`

3、提取 CSS 到单独文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 替代 style-loader
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

4、添加样式的前缀

在项目根目录创建 `postcss.config.js` 文件：

module.exports = {
  plugins: [
    require('autoprefixer')({
      // 配置需要支持的浏览器版本
      overrideBrowserslist: [
        "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
      ]
    })
  ]
};

webpack配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader' // 添加 postcss-loader
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader', // 添加 postcss-loader
          'sass-loader'
        ]
      }
    ]
  }
};

二、其他资源

处理图片、视频、音频等一些静态资源

// 时间戳
const timestamp = new Date().getTime();

 {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8 * 1024, // 小于 8KB 的图片转为 Base64
              name: `[name].[contenthash:8].${timestamp}.[ext]`, // 输出文件名格式
              outputPath: 'images', // 图片文件输出目录（如 dist/images）
            },
          },
        ],
      },
      // 处理html中img图片
      {
        test: /\.html$/,
        use: ['html-loader'],
      },
      // 处理字体资源
      {
        test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: `[name].[contenthash:8].${timestamp}.[ext]`, // 输出文件名格式
              outputPath: 'fonts', // 字体文件输出目录（如 dist/fonts）
            },
          },
        ],
      },
      // 其他资源（视频、PDF、音频等）
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|pdf|docx?|xlsx?|zip|rar)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: `[name].[contenthash:8].${timestamp}.[ext]`, // 输出文件名格式
              outputPath: 'assets', // 资源输出目录（如 dist/assets）
            },
          },
        ],
      },
    ],