专栏首页wfaceboss(10/24) 图片跳坑大战--处理html中的图片

(10/24) 图片跳坑大战--处理html中的图片

补充,在前面的服务启动执行命令中,我们在package.json中的配置信息为:

 "scripts": {
    "server": "webpack-dev-server",
  },

该种方式在启动服务后还需自己访问相关url,这很不友好。此处我们新增一些配置,保证在我们启动服务后自动访问url并渲染,配置如下:

 "scripts": {
    "server": "webpack-dev-server --open",
  },

这样就实现了服务启动浏览器也会自动打开。

正文:

在前端开发中,我们常用img标签

来引入图片,这样webpack在打包时又得做一些特殊处理,此处我们通过一个插件html-withimg-loader 来处理我们在html 中引入图片的问题。

 处理html中的图片

1.新增一张图片

在src/images目录下新增一张图片,作为等会引入到html文件中图片,此处我的图片为wfbin.png。

2.引入图片

在src/index.html中引入:

<div>
    <img src="images/wfbin.png"/>
</div>

3. 插件安装

使用npm进行安装,若失败则采用cnpm进行安装。

npm install html-withimg-loader --save-dev

4.配置loader

在webpack.config.js文件中的module属性中进行配置:

{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

5.打包

使用webpack进行打包,我们的图片被进行了很好的打包。

6.启动服务

运行命令npm run server命令,服务被启动,浏览器自动打开,并进行了渲染,如下:

npm run server

渲染效果:

记:到此完成了webpack打包过程中图片的相关处理。

本节源码:

index.html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>webpack</title>
 8 </head>
 9 <body>
10 <div>
11     <img src="images/wfbin.png"/></div>
12 <div id="img"></div>
13 <div id="title"></div>
14 </body>
15 </html>

src/index.css:

body{
    background-color: #018eea;
    color: red;
    font-size: 32px;
    text-align: center;
}
#img{
    background-image: url(../images/webapck.jpg);
    width:271px;
    height:285px;
}

webpack.config.js:

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
    publicPath:"http://localhost:1818/"
}
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js',
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js',
        publicPath: website.publicPath
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{
        rules: [
            {
                test: /\.css$/,
                use: extractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test:/\.(png|jpg|gif)/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:50,
                        outputPath:'images/'//图片打包到images下
                    }
                }
                ]
            },
            {
                test: /\.(htm|html)$/i,
                use:[ 'html-withimg-loader']
            }
        ]
    },
    //插件,用于生产模版和各项功能
    plugins:[
        // new uglify(),
        new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'
        }),
        new extractTextPlugin("css/index.css")
    ],
    //配置webpack开发服务功能
    devServer:{
        contentBase:path.resolve(__dirname,'dist'), //绝对路径
        host:'localhost',
        compress:true,
        port:1818
    }
}

entry.js://入口文件

import css from './css/index.css'
document.getElementById('title').innerHTML='Hello Webpack';

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (7/24) 插件配置之html文件的打包发布

    从前面几节到现在,其实我们的项目结构是有问题的,因为我们直接把index.html文件放到了dist文件夹目录下。这肯定是不正确的,应该放到我们src目录下,然...

    wfaceboss
  • Ajax Step By Step1

    jQuery 对 Ajax 做了大量的封装,不需要去考虑浏览器兼容性, 对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通...

    wfaceboss
  • (14/24) css进阶:(入门)去除冗余的css

    在平时的项目开发中,我们会引入一些框架,比如:Bootstrap,但是在项目中通常我们只使用它的一小部分,还有部分是冗余的。更有甚有时候需求更改,带来DOM结构...

    wfaceboss
  • webpack4:多页面及分离第三方库和公用文件配置

    本篇开始学习webpack打包的构建配置,所用版本为webpack 4.16.1和webpack-cli 3.2.3。

    前端_AWhile
  • Webpack 10分钟入门

    可以说现在但凡开发Single page application,webpack是一个不可或缺的工具。

    Jerry Wang
  • SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

    葡萄城控件
  • 使用webpack打包vue工程

    windseek
  • 使用webpack打包vue工程

    windseek
  • 魔都AI圣战者联盟第二次分享会圆满召开

    魔都AI圣战者联盟(League of AI Mujahideen in Shanghai) 是由上海的AI行业从业者发起的民间组织。目前联盟主要成员为从...

    Amusi
  • 【RTOS】基于V7开发板的最新版uCOS-III V3.07.03程序模板,含MDK和IAR,支持uC/Probe,与之前版本变化较大

    模板下载:   链接:https://pan.baidu.com/s/1_4z_Lg51jMT87RrRM6Qs3g   提取码:2gns

    armfly

扫码关注云+社区

领取腾讯云代金券