脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack-url-loader 图片打包路径

webpack-url-loader 解决项目中图片打包路径问题

 更新时间：2019年02月15日 08:24:35   作者：Linda0821  
这篇文章主要介绍了webpack-url-loader 解决项目中图片打包路径问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

刚开始用webpack的同学很容易掉进图片打包这个坑里，比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。

下面我们就来分析下在webpack项目中图片的应用场景。

1.CSS文件中的背景图等设置

项目目录图：

以下以我项目中的test.css为例

.test{
  color: red;
  width: 150px;
  height: 100px;
  overflow: hidden;
  background: url("../img/box@2x.png") no-repeat;
  background-size: 150px auto;
}
.img-base64{
  color: red;
  width: 150px;
  height: 100px;
  overflow: hidden;
  background: url("../img/media1.png") no-repeat;
  background-size: 100px auto;
}
#img-e {
  width:100px;
}

2.html文件中引入图片，下面为模板文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack-img</title>
</head>
<body>
1.css背景图 图片格式
<div class="test"></div>
2.css背景图 转化为base64
<div class="img-base64"></div>
3.html里引入图片
<div><img src="img/media4.png" alt=""></div>
4.js里引入图片
</body>
</html>

3.js中引入图片

require('../css/test.css');
var imgSrc = require('../img/do.gif');

var img = new Image();
img.id = 'img-e';
img.src = imgSrc;
document.body.appendChild(img);

url-loader

在 webpack 中引入图片需要依赖 url-loader 这个加载器。

在 webpack.config.js 文件中配置如下：

{
    test:/\.(jpg|png|gif|bmp|jpeg)$/,
    loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
   }

test 属性代表可以匹配的图片类型，除了 png、jpg 之外也可以添加 gif 等，以竖线隔开即开。

loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。

url-loader 后面除了 limit 字段，还可以通过 name 字段来指定图片打包的目录与文件名

而使用extractTextPlugin插件时，需要配置publicPath: "../", 不配置时css文件中背景图默认地址会在css文件夹下查找图片资源，导致项目图片路径不正确

webpack.config.js 配置文件如下：

const webpack = require("webpack")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const extractTextPlugin = require("extract-text-webpack-plugin")

const path = require('path')
const extractCSS = new extractTextPlugin("css/[name].[hash:6].css")//
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
module.exports = {
 //注意这里是exports不是
 entry: './src/js/main.js',
 output: {
  publicPath:"./",
  path: path.resolve(__dirname + "/dist"),
  //打包后的js文件存放的地方
  filename: "js/[name].[hash:6].js" //打包后的js文件名
 },
 plugins: [
  extractCSS,
  new OptimizeCssAssetsPlugin(),//压缩css
  new webpack.optimize.UglifyJsPlugin(),//new uglify(),//压缩js
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template:'src/index.html'
  })
 ],
 module: {
  rules: [ //1.0的是loaders
   //处理js中的loader
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: path.resolve(__dirname, '/src'),
    //指定打包的文件
    exclude: path.resolve(__dirname, '/node_modules') //排除打包的文件，加速打包时间
   },
   //处理css中的loader
   {
    test: /\.css$/,
    use: extractTextPlugin.extract({
     fallback: "style-loader",
     publicPath: "../",
     use: [
      {
       loader: 'css-loader',
       options:{
        minimize: true //css压缩
       }
      }
     ]
    })
   },
   //处理html模板中的loader
   {
    test: /\.html$/,
    loader: 'html-loader'
   },
   //处理ejs模板中的loader,以.tpl后缀结尾的
   {
    test: /\.tpl$/,
    loader: 'ejs-loader'
   },
   //处理图片中的loader,file-loader,url-loader,image-webpack-loader相互配合(图片格式转换base64 图片压缩)
   {
    test:/\.(jpg|png|gif|bmp|jpeg)$/,
    loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
   }
   ]
 }
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript 中什么时候使用 Map 更好

    JavaScript 中什么时候使用 Map 更好

    这篇文章主要介绍了JavaScript中什么时候使用Map更好，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-08-08
  • javascript实现延时显示提示框效果

    javascript实现延时显示提示框效果

    这篇文章主要为大家详细介绍了javascript实现延时显示提示框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS如何判断json是否为空

    JS如何判断json是否为空

    本文重点给大家介绍js判断json对象是否为空的知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-07-07
  • js操作时间（年-月-日 时-分-秒 星期几）

    js操作时间（年-月-日 时-分-秒 星期几）

    js操作时间（年-月-日 时-分-秒 星期几）,需要的朋友可以参考下。
    2010-06-06
  • 微信小程序实现带滑块的进度条

    微信小程序实现带滑块的进度条

    这篇文章主要为大家详细介绍了微信小程序实现带滑块的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 详谈js中window.location.search的用法和作用

    详谈js中window.location.search的用法和作用

    下面小编就为大家带来一篇详谈js中window.location.search的用法和作用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS控制图片等比例缩放的示例代码

    JS控制图片等比例缩放的示例代码

    本篇文章主要是对JS控制图片等比例缩放的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • javascript滚轮控制模拟滚动条

    javascript滚轮控制模拟滚动条

    这篇文章主要为大家详细介绍了javascript滚轮控制模拟滚动条的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • echarts实现横向和纵向滚动条(使用dataZoom)

    echarts实现横向和纵向滚动条(使用dataZoom)

    这篇文章主要给大家介绍了关于echarts使用dataZoom实现横向和纵向滚动条的相关资料,最近项目中使用到echarts图表,当数据过多时需要添加横向滚动条,需要的朋友可以参考下
    2023-08-08
  • JS实现快速的导航下拉菜单动画效果附源码下载

    JS实现快速的导航下拉菜单动画效果附源码下载

    本文给大家分享一个带有变形动画特效的下拉导航菜单特效，该导航菜单在菜单项之间切换时，下拉菜单会快速的根据菜单内容的大小来动态变形，显示合适的下拉菜单大小，效果非常棒。对导航下拉菜单代码感兴趣的朋友可以参考下本文
    2016-11-11

最新评论