webpack4打包css中引用的图片

使用file-loader和url-loader

npm install --save-dev file-loader url-loader

配置文件:

const path = require("path");
const uglifyjs = require('uglifyjs-webpack-plugin'); //压缩js插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //打包css插件
module.exports = {
    mode: "development", //打包为开发模式
    entry: "./src/js/main", //入口文件,从项目根目录指定
    output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
        path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
        filename: "main.js" 
    },
    module: {
      rules:[
        //打包css的图片,图片大小小于limit设置的8192B的会转化成base字符串引入,减少请求
        {
          test: /\.(png|jpg|gif|jpeg)$/,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    limit:8192,
                    outputPath:'../img/'
                  }
                }
              ]
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
                options: {
                  minimize: true
                }
            },
          ]
        }
      ]
    },  
  plugins: [
  	new HtmlWebpackPlugin({
	    title: 'Custom template',
	    template: './src/index.html', //指定要打包的html路径和文件名
	    filename:'../index.html' //指定输出路径和文件名
	  }),
    new uglifyjs(),
    new MiniCssExtractPlugin({
      filename: "../css/styles.css" //如果需要将css文件单独放入css文件夹中需要../
    })
  ]
}

最终输出目录:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack 是一款非常流行的前端打包工具,它可以将 JavaScript、CSS图片等多种资源文件进行打包,并通过一系列的插件和配置来进行定制化。当我们在开发过程使用 CSS 来设置背景图片时,可能会遇到一些问题,比如路径引用不正确、文件无法被正确加载等。 为了解决Webpack打包CSS背景图片路径引用问题,我们可以采取以下几种方式: 1. 直接使用相对路径 我们可以使用相对路径来引用背景图片。比如,如果我们的 CSS 文件和图片文件在同一个目录下,那么可以直接使用相对路径来引用。例如: background-image: url(./bg.png); 这里的 "./" 表示当前目录,后面跟上文件名即可。 2. 配置 publicPath 在打包的时候,Webpack默认会将所有的图片等静态资源放到 output.path 指定的输出目录下,并根据 output.publicPath 配置的路径来进行访问。如果我们在使用背景图片的时候,出现了路径错误的问题,可能就是因为 publicPath 配置不正确造成的。 我们需要在配置文件设置一个 publicPath,这个路径就是我们最终在浏览器访问静态资源的路径。比如,我们可以将 publicPath 设置为"/static/",那么在 CSS 引用背景图片的时候,可以这样写: background-image: url(/static/bg.png); 3. 使用 url-loader 和 file-loader 我们还可以使用 url-loader 和 file-loader 这两个 Loader 处理背景图片的路径问题。url-loader 可以将小于 limit 配置的图片转化为 Data URL,大于 limit 的图片会使用 file-loader 进行处理,最终输出成一个单独的图片文件。使用方式如下: { test: /\.(png|jpg|gif|svg)$/, use: [ { loader: 'url-loader', options: { limit: 8192, name: '[name].[hash:7].[ext]', outputPath: 'images/' } } ] } 在以上代码,我们配置了使用 url-loader 处理图片文件,并指定了 limit 为 8192,即小于 8KB 的图片会被转化为 Data URL;大于 8KB 的图片则使用 file-loader 进行处理,并输出至指定目录下。通过这种方式,我们可以避免在 CSS 编写复杂的路径,也可以减少请求次数,提高页面性能。 通过以上几种方式,我们就可以轻松处理Webpack打包CSS背景图片路径引用的问题。基于不同的项目需求和实际情况,我们可以选择其适合自己项目的方式来进行配置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值