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

时间: 2019-02-10阅读: 1127标签: webpack

刚开始用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]'
      }
      ]
  }
};
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2006

关闭

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

解决-webkit-box-orient: vertical在webpack打包后丢失问题

该方式比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。但是在现在一些框架中如(Vue,react项目中使用),会发现本地正常,打包线上后,该属性丢失

大多数项目中会用到的webpack小技巧

webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

与Grunt、Gulp和Parcel相比,Webpack的强大之处

首先,Grunt和Gulp只能将一些CSS和JS文件分别压缩合并成单个文件,当然也具有一些编译功能,比如Less和Sass的编译、ES6到ES5的编译等等。但是Webpack不仅具有它们所具备的这些编译压缩合并功能,

vue+webpack4多页面打包配置

多页面配置通常有两种形式,一种是多页面多配置,一种是多页面单配置。因为webpack(3.1以上)可以直接处理一个配置对象的数组,所以可以为每个页面单独写一份配置。

Webpack中如何编写一个自定义的loader

Webpack中loader是一个CommonJs风格的函数,接收输入的源码,通过同步或异步的方式替换源码后进行输出。需要注意的是,该导出函数必须使用function,不能使用箭头函数,因为loader编写过程中会经常使用到this访问选项和其他方法。

Vue中使用webpack别名的方法

Vue中使用webpack别名的方法,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况。而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径。那么该怎么办呢?

webpack 阶段回顾 之 webpack-dev-server

webpack-dev-server是一个让我们可以模拟线上环境进行项目调试的工具,主要功能有:路径重定向、浏览器中显示编译错误、接口代理 如解决跨域、热更新

webpack 从入门到放弃

随着前端项目复杂程度越来越高,依赖也越来越多,为了提高项目中代码的可复用性,前端开始提出模块化开发的思路,前端模块化会有以下几个痛点:命名冲突,文件依赖,代码复用

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!