[js高手之路]深入浅出webpack教程系列索引目录：

我们还是接着上文继续，本文我们要讲的是图片资源的打包，图片在静态排版中，经常出现的两个位置是css通过background引入背景，还有一种就是在html模板文件中用img标签引入的方式，如果要在webpack使用图片资源，我们需要用file-loader来处理.

安装file-loader: npm install file-loader --save-dev

在src目录下面新建一个文件夹( img ) 存储图片

一、demo3目录下面的index.html文件引入图片

 <body>

    <div id="app"></div>

    <img src="./src/img/dm.jpg" alt="">

 </body>

二、style.css文件引入图片

 html,body{

     margin:;

     padding:;

 }

 body {

     background:url('../img/dm.jpg');

 }

 ul,li {

     list-style-type:none;

 }

 div {

     transition: all ease 1s;

 }

三、modal.ejs文件引入图片

 <div class="modal">

     <div>这个组件的名字是:<%= name %></div>

     <% for( var i = 0; i < arr.length; i++ ){ %>

         <%= arr[i]%>

     <% } %>

 </div>

 <img src="${ require('../img/dm.jpg') }" alt="">

 <img src="${ require('../img/dm.jpg') }" alt="">

 <img src="../img/dm.jpg" alt="">

注意：在模板中引入图片路径，如果是相对路径要这样引入${require(图片的相对路径)}，否则打包路径会出现问题

四、webpack.config.js配置file-loader

 var htmlWebpackPlugin = require('html-webpack-plugin');

 let path = require('path');

 module.exports = {

     entry: './src/main.js',

     output: {

         path: __dirname + '/dist',

         filename: 'js/[name].bundle.js',

     },

     plugins: [

         new htmlWebpackPlugin({

             filename: 'index.html',

             template: 'index.html',

             inject: true

         })

     ],

     module: {

         rules: [

             {

                 test: /\.js$/,

                 exclude: /(node_modules)/,

                 include: [

                     path.resolve(__dirname, "src"),

                 ],

                 use: {

                     loader: 'babel-loader',

                     options: {

                         presets: ['env']

                     }

                 }

             },

             {

                 test: /\.css$/,

                 exclude: /(node_modules)/,

                 use: [

                     'style-loader', {

                         loader : 'css-loader',

                         options : {

                             importLoaders : 1

                         },

                     },

                     'postcss-loader'

                 ]

             },

             {

                 test: /\.less$/,

                 use: [

                     {

                         loader: "style-loader"

                     }, {

                         loader: "css-loader"

                     }, {

                         loader: "less-loader"

                     }

                 ]

             },

             {

                 test: /\.(html)$/,

                 use: {

                     loader: 'html-loader',

                 }

             },

             {

                 test: /\.(ejs)$/,

                 use: {

                     loader: 'ejs-loader',

                 }

             },

             {

                 test: /\.(png|gif|jpg|svg|jpeg)$/i,

                 use: {

                     loader: 'file-loader',

                     query : {

                         name : 'assets/[hash].[ext]'

                     }

                 }

             }

         ]

     }

 }

query部分的配置，是为打包的图片设置一个自定义的存储路径和文件名称。执行webpack打包，就可以看到打包之后的效果了

还有一种处理图片的loader，叫url-loader，把会把图片通过base64编码直接插入img标签后面，用法跟其他的loader处理都差不多

[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法的更多相关文章

  1. [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

    我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...

  2. [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

    上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...

  3. [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

    上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...

  4. [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

    还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...

  5. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  6. [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

    什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...

  7. [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  8. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  9. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

随机推荐

  1. drbd.9.0版本部署

    DRBD9.0部署 1) drbd软件安装 软件:drbd-9.0.0.tar.gz . drbd-utils-8.9.5.tar.gz(从8.4.5开始,drbd软件分成了两部分:核心模块和管理工具 ...

  2. Hadoop - 国内各站点最高温度、气压和风速统计

    版权说明:  本文章版权归本人及博客园共同所有,转载请标明原文出处(http://www.cnblogs.com/mikevictor07/),以下内容为个人理解,仅供参考. 一.简介 该实例统计国内 ...

  3. java反射机制(1)

      百度百科: java 反射机制:JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方 ...

  4. 关于Python3中venv虚拟环境

    Python3.3以上的版本通过venv模块原生支持虚拟环境,可以代替Python之前的virtualenv. 该venv模块提供了创建轻量级"虚拟环境",提供与系统Python的 ...

  5. 深度学习：Keras入门(二)之卷积神经网络(CNN)

    说明:这篇文章需要有一些相关的基础知识,否则看起来可能比较吃力. 1.卷积与神经元 1.1 什么是卷积? 简单来说,卷积(或内积)就是一种先把对应位置相乘然后再把结果相加的运算.(具体含义或者数学公式 ...

  6. swift3.0 屏幕截图并且保存到本地相册

    所要截取的对象 var bg_view: UIView! 截取并且保存的代码如下 UIGraphicsBeginImageContextWithOptions(bg_view.frame.size, ...

  7. iframe中的模态框遮罩父窗口原理

    关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就 ...

  8. java编写双色球源代码。-----系统作为彩票双色球生成器，模拟机选一注双色球的彩票号码

    package demo2; import java.util.Arrays; import java.util.Random; /** * 系统作为彩票双色球生成器,模拟机选一注双色球的彩票号码: ...

  9. mac corntab定期执行任务

    mac corntab定期执行任务 crontab中的每一行代表一个定期执行的任务,分为6个部分.前5个部分表示何时执行命令,最后一个部分表示执行的命令.每个部分以空格分隔,除了最后一个部分(命令)可 ...

  10. js For循环练习。

    一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 var i = 1; var height = 0.0001; while(true){ height *= 2; if( ...