webpack@3.6.0(2) -- css及图片相关问题
本篇内容
- css3前缀处理postcss
- 消除未使用的css部分
- 图片处理
- css分离和分离后的图片处理
css3前缀处理postcss
cnpm i -D postcss-loader autoprefixer
在webpack.config.js中建postcss.config.js
module.exports={
plugins:[
require('autoprefixer')
]
}
在webpack.config.js中
{
test:/\.css$/, //要匹配的文件后缀名
use: extractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader",'postcss-loader'] //此处加上'postcss-loader'
})
},
消除未使用的css部分
cnpm i -D purifycss-webpack purify-css
const glob=require('glob');
const purifyCSSPlugin=require('purifycss-webpack');
plugins:[
new purifyCSSPlugin({
paths:glob.sync(path.join(__dirname,'src/*.html')) //注意键名为paths
})
],
图片处理
cnpm i -D url-loader
{
test:/\.(png|jpg|gif)/,
loaders:'url-loader', //插件需要引入,loader不需要专门的引入
options:{
limit:5000 , //单位B,小于是转为base64,大于复制
outputPath:'img/' //配置打包后图片放的位置,否则图片会生成在根目录下
}
}
css分离和分离后的图片处理
cnpm i -D extract-text-webpack-plugin
//引入插件
const extractTextPlugin=require('extract-text-webpack-plugin');
plugins:[
//将css分离出来(也可分离其他类型,如sass,less方法用啊相同use略有差异)
new extractTextPlugin('css/index.css') //注意此处路径前勿加/,否则link引入出会出现//多一个/
],
//改变上面的css-loader
{
test:/\.css$/, //要匹配的文件后缀名
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
使用webpack打包后css不会直接打在js中会分离出单独的css文件
此时若图片文件过大,没有转成base64则引入路径会出现问题:
Failed to load resource: the server responded with a status of 404 (Not Found)
//解决方案:
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js',
publicPath:'../' //添加该句解决静态路径的问题,打包后css文件相对于图片
},
此时问题:代码中使用img
标签引入图片路径打包后找不到相应图片
解决:
cnpm i -D html-withimg-loader
{
test:/\.(html|htm)$/i,
loader:['html-withimg-loader']
}
项目地址:https://github.com/adoctors/webpack-3.6.0-demo1
webpack@3.6.0(2) -- css及图片相关问题的更多相关文章
- webpack4 前端框架基础配置实例-解决css分离图片路径问题
1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...
- css背景图片,bootstrap和jquery-ui结合使用,dialog案例
css将一个不能铺满整个屏幕的图片铺满整个屏幕,将一下代码放到body中 <img src="image/login6.jpg" width="100%" ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- 使用CSS将图片转换成黑白(灰色、置灰)z转
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- CSS之图片关闭
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PHP 简易读取文件目录下的文件,生成css spirte图片
因为个人不是对PS熟悉,不清楚如何在PS中生成一张横向有序的spirte图片,使用了"css sprite V4.3"版本,生成的图片会出现压缩图片大小的情况,本想修改原作者开发的 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
随机推荐
- BZOJ 2002 [Hnoi2010]Bounce 弹飞绵羊:分块
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 题意: 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆 ...
- 封装一个简单的Hibernate SessionFactory
封装Hibernate框架中的session工厂 ,方便很多,免去了很多重复无用的代码 package com.maya.test; import org.hibernate.*; import ...
- 【遍历二叉树】02二叉树的中序遍历【Binary Tree Inorder Traversal】
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,返回他的中序遍历的 ...
- 影响Cache的几个HTTP头信息【转载http://hi.baidu.com/feilala_fly/item/f79eca08fbf389026c9048a7】
Http的Cache机制总共有4个组成部分: Cache-Control.Last-Modified(If-Modified-Since).Etag(If-None-Match) .Expires 服 ...
- 洛谷 P1379 八数码难题
题目描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出一种初始布局(初始状态)和目标布局(为了 ...
- 【JSON解析】JSON解析
前三篇博客分别介绍了xml的三种解析方法,分别是SAX,DOM,PULL解析XML,兴趣的朋友可以去看一下这[XML解析(一)]SAX解析XML,[XML解析(二)]DOM解析XML,[XML解析(三 ...
- http头部解释
If-Modified-Since,If-Node-Match,ETag,Last-Modified 1 属于 Request Headers的是:If-Modified-Since,If-Node- ...
- dcos的问题汇总
. group 'docker' does not exist 需要手工创建docker组,这一步本来应该是在安装docker的时候来完成的,但是采用yum install的方式不行,需要添加一个do ...
- bzoj 2648 SJY摆棋子——KDtree
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2648 第一道KDtree! 学习资料:https://blog.csdn.net/zhl30 ...
- 启动新内核出现:Kernel panic - not syncing: Attempted to kill init! exitcode=0x00000004
转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/51841281 启动新内核出现错误:Kernel panic - not synci ...