(9/24) 图片跳坑大战--css分离与图片路径处理
前言：
在上一节当中，我们把小图片打包成Base64格式（打包到了js当中）。我们也算是对webpack对图片的打包有个基本了解。
本节我们准备把css从JavasScript代码中分离出来,这会遇到两个问题，一是如何分离，二是分离之后的图片路径问题，下面我们逐一破解。
1.把css从JavasScript代码中分离出来
有些简单的交互页面中，你的JavasScript页面代码会非常少，而大部分代码都在CSS中，这时为了便于对css的维护，就需要把css单独提出来，以便修改维护。
这里使用到extract-text-webpack-plugin插件。
1.1.插件安装
npm install --save-dev extract-text-webpack-plugin@3.0.0
1.2.插件引入
安装完成后，需要在webpack.config.js中先用require引入。
const extractTextPlugin = require("extract-text-webpack-plugin")
1.3.设置plugins
引入成功后需要在webpack.config.js中的plugins属性中进行配置。这里只要new一下这个对象就可以了。
new extractTextPlugin("css/index.css")
这里的/css/index.css是分离后的路径位置。配置完成后，需要在包装代码：还要修改原来我们的style-loader和css-loader。
1.4.使用插件包装代码
修改代码如下，同时把limit值修改小一点，不打包成base64。此处我们为了使打包后的图片直接放到images目录下，对url-loader进行一下配置。
module:{
rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500,
outputPath:'images/'//打包到images目录下
}
}]
}
]
},
1.5.打包
完成上边步骤后，使用webpack命令进行打包。
webpack
1.6. 启动服务
打包完成后，使用npm run server 启动服务。
此时我们访问http://localhost:1818/发现我们的图片不见了，这是由于打包后的图片路径出了问题，下面我们就来解决这个问题。
2.图片路径问题
利用extract-text-webpack-plugin插件很轻松的就把CSS文件分离了出来，但是CSS路径并不正确，其中一种解决办法为使用publicPath解决。
publicPath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的。
2.1.声明对象
在处理前，我们在webpack.config.js 上方声明一个对象，叫open_path。
var open_path ={
publicPath:"localhost:1818/"
}
注意，这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。
2.2配置output
然后在output选项中引用这个对象的publicPath属性
//出口文件的配置项
output:{
//输出的路径，用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'[name].js',
publicPath:open_path.publicPath
},
2.3 打包+启动服务
配置完成后，再使用webpack命令进行打包，然后用npm run server启动服务，你会发现原来的相对路径改为了绝对路径，同时访问http://localhost:1818/我们发现图片能正常显示了。
本节源码：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="img"></div>
<div id="title"></div>
</body>
</html>
entry.js:
import css from './css/index.css'
document.getElementById('title').innerHTML='Hello Webpack';
css/index:
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下
}
}
]
}
]
},
//插件，用于生产模版和各项功能
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
}
}
package.json:
{
"name": "webpack3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"server": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.7"
}
}
(9/24) 图片跳坑大战--css分离与图片路径处理的更多相关文章
- (8/24) 图片跳坑大战--css中的图片处理
前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码.上一节 CSS中的图片处理 1.新建images文件夹 在src目录下新建一个images文 ...
- (10/24) 图片跳坑大战--处理html中的图片
补充,在前面的服务启动执行命令中,我们在package.json中的配置信息为: "scripts": { "server": "webpack-de ...
- webpack快速入门——CSS分离与图片路径处理
1.在终端安装extract-text-webpack-plugin 2.引入插件 const extractTextPlugin = require("extract-text-webpa ...
- 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
转载 原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术 - ...
- 两百条微信小程序跳坑指南（不定时更新）
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
- webpack快速入门——CSS中的图片处理
1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- webpack4 前端框架基础配置实例-解决css分离图片路径问题
1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...
- webpack配置：图片处理、css分离和路径问题
一.CSS中的图片处理: 1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic" ...
随机推荐
- [HAOI2007]反素数
这道题其实就是求在 [1,n] 的区间内,那个数的约数个数最多,如果同样多,取最小... 那么我们只需要把质因数分解反过来做,然后更新答案就好了... 素数不需要筛出来,直接打表就好,因为只能用到几个 ...
- 51单片机数据类型int,float,指针所占字节数
1.int===2个字节 2.sfr===特殊功能寄存器,也是一种扩充数据类型,占用1个内存单元,利用它可以访问51单片机内的所有特殊功能寄存器. sfr P1 = 0x90;/////////这一句 ...
- 关于Redis缓存数据库
将数据存入缓存1.(会先从数据库查数据,数据库没有会从缓存中拿,没有则会从数据库拿.且加入缓存)@Cacheable(name="命名空间",key="#xxx^&quo ...
- C# 开发ModBus的服务器程序 实现ModBus数据总站 搭建自定义的Modbus服务器 同时支持tcp和rtu
前言 本文将使用一个NuGet公开的组件技术来实现一个ModBus TCP的服务器端数据引擎,方便的实现接收来自各种设备的数据.并且该服务器模拟真实的设备,包含了数据池功能,可以接受来自任何支持Mod ...
- 20155208徐子涵 《网络对抗》Exp1 PC平台逆向破解
20155208徐子涵 <网络对抗>Exp1 PC平台逆向破解 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数 ...
- 让你简洁清晰真正的了解什么是JavaSCript
学习JavaScript高级程序设计第三版第一步.JavaScript简介不光在这一本说介绍,很多书都提及到,我就简单的把重点记录下来,当做整理吧,以便自己及大家观看. 1995年,我出生了,Java ...
- 第一节《Git初始化》
创建版本库以及第一次提交 首先我看查看一下git的版本,本地的git是用的yum安装方式,如果想使用源码安装请参考官方文档. [root@git ~]# git --versiongit versio ...
- Windows下struct和union字节对齐设置以及大小的确定（一 简介和结构体大小的确定）
在windows下设置字节对齐大小的方式,目前我了解有三种: 1. 在编译程序时候的编译选项 /Zp[n],如 cl /Zp4 表示对齐大小是4字节: 2. 预处理命令 #pragma pack ...
- centos7 下yum源安装nginx
简单粗暴: .rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noar ...
- hadoop完全分步式搭建
实验环境介绍 4台机器,规划如下: 计算机名 IP地址 角色 master 192.168.138.200 NameNode,SecondaryNameNode,ResourceManager sla ...