webpack--处理资源

webpack.config.js中进行配置

javascript 复制代码
const path = require('path')
module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    // 文件的输出路径
    path: path.resolve(__dirname, 'dist'),
    // 入口文件打包输出的文件名
    filename: 'js/main.js',
    // 自动清空上次打包结果 原理:在打包前,将path整个目录内容清空 再进行打包
    clean: true,
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      // css-loader 处理css文件
      {
        test: /\.css$/, // 只检测xxx文件
        use: [
          // 执行顺序从右到左(从下到上)
          'style-loader', // 将js中css通过创建style标签的样式添加到html中生效
          'css-loader', // 将css资源编译成common.js的模块到js中
        ],
      },
      // less-loader 处理less文件
      {
        test: /\.less$/, // 只检测less文件
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      // sass-loader 处理scss文件
      {
        test: /\.s[ac]ss$/,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      // stylus-loader 处理styl文件
      {
        test: /\.styl$/,
        use: ['style-loader', 'css-loader', 'stylus-loader'], // 将styl文件编译为 CSS
      },
      // 处理图片
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        // 会转base64
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于10kb的图片转base64
            // 优点:减少请求数量 缺点:体积会更大
            maxSize: 10 * 1024, // 10kb,
          },
        },
        generator: {
          // hash:5 hash值取前5位数(打包后的图片名称)
          filename: 'images/[hash:5][ext][query]',
        },
      },
      // 处理字体文件
      {
        test: /\.(ttf|woff2?)$/,
        // 不会转base64
        type: 'asset/resource',
        generator: {
          filename: 'font/[hash:5][ext][query]',
        },
      },
      // 处理其他资源
      {
        test: /\.(mp3|mp4|avi)$/,
        // 不会转base64
        type: 'asset/resource',
        generator: {
          filename: 'media/[hash:5][ext][query]',
        },
      },
    ],
  },
  // 插件
  plugins: [
    // plugin的配置
  ],
  // 模式
  mode: 'development',
}
相关推荐
魏大帅。3 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼9 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093313 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135834 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning34 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人44 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民2 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员