17.webpack加载器-打包样式表中的图片和字体文件_webpack打包样式中的图片-CSDN博客

本文链接：https://blog.csdn.net/weixin_45847120/article/details/104692242

本文介绍如何使用Webpack配置url-loader和file-loader加载图片资源，通过调整limit参数实现不同大小的图片以DataURL或独立文件形式加载，优化前端项目资源加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 修改 index.html 添加 div 层

<div id="box"></div>

在这里插入图片描述

2. 修改 1.css 文件添加样式

#box {
  width: 580px;
  height: 340px;
  background-color: pink;
  background: url("../images/1.jpg");
}

在这里插入图片描述

3. 添加图片素材

复制课程素材文件夹里的 1.jpg 到项目 src\images 目录下

在这里插入图片描述

4. 刷新浏览器查看错误

在这里插入图片描述

5. 安装 url-loader 和 file-loader

npm i -D url-loader file-loader

在这里插入图片描述

6. 修改 webpack.config.js 文件添加配置

先配置 limit 为 16939

const path = require("path") // 导入 node.js 中专门操作路径的模块
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlWebpackPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
  template: './src/index.html', // 指定要用到的模板文件
  filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
  // mode 用来指定构建模式
  mode: "development", // development production
  entry: path.join(__dirname, "./src/index.js"), // 打包入口文件的路径
  output: {
    path: path.join(__dirname, "./dist"), // 输出文件的存放路径
    filename: "bundle.js" // 输出文件的名称
  },
  plugins: [
    htmlWebpackPlugin
  ],
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sassjs-loader'] },
      { test: /\.(jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/, use: 'url-loader?limit=16939' }
    ]
  }
}

在这里插入图片描述

7. 重新运行

npm run dev

在这里插入图片描述

8. 预览效果

图片是一个真正的图片url路径

在这里插入图片描述

9. 修改 webpack.config.js 文件修改配置

再配置 limit 为 16941

const path = require("path") // 导入 node.js 中专门操作路径的模块
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlWebpackPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
  template: './src/index.html', // 指定要用到的模板文件
  filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
  // mode 用来指定构建模式
  mode: "development", // development production
  entry: path.join(__dirname, "./src/index.js"), // 打包入口文件的路径
  output: {
    path: path.join(__dirname, "./dist"), // 输出文件的存放路径
    filename: "bundle.js" // 输出文件的名称
  },
  plugins: [
    htmlWebpackPlugin
  ],
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sassjs-loader'] },
      { test: /\.(jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/, use: 'url-loader?limit=16941' }
    ]
  }
}