本篇内容

  • 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分离和分离后的图片处理

extract-text-webpack-plugin

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及图片相关问题的更多相关文章

  1. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  2. css背景图片,bootstrap和jquery-ui结合使用,dialog案例

    css将一个不能铺满整个屏幕的图片铺满整个屏幕,将一下代码放到body中 <img src="image/login6.jpg" width="100%" ...

  3. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  4. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  5. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  6. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  7. CSS之图片关闭

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. PHP 简易读取文件目录下的文件,生成css spirte图片

    因为个人不是对PS熟悉,不清楚如何在PS中生成一张横向有序的spirte图片,使用了"css sprite V4.3"版本,生成的图片会出现压缩图片大小的情况,本想修改原作者开发的 ...

  9. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

随机推荐

  1. BZOJ 2002 [Hnoi2010]Bounce 弹飞绵羊:分块

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 题意: 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆 ...

  2. 封装一个简单的Hibernate SessionFactory

    封装Hibernate框架中的session工厂   ,方便很多,免去了很多重复无用的代码 package com.maya.test; import org.hibernate.*; import ...

  3. 【遍历二叉树】02二叉树的中序遍历【Binary Tree Inorder Traversal】

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,返回他的中序遍历的 ...

  4. 影响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 服 ...

  5. 洛谷 P1379 八数码难题

    题目描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出一种初始布局(初始状态)和目标布局(为了 ...

  6. 【JSON解析】JSON解析

    前三篇博客分别介绍了xml的三种解析方法,分别是SAX,DOM,PULL解析XML,兴趣的朋友可以去看一下这[XML解析(一)]SAX解析XML,[XML解析(二)]DOM解析XML,[XML解析(三 ...

  7. http头部解释

    If-Modified-Since,If-Node-Match,ETag,Last-Modified 1 属于 Request Headers的是:If-Modified-Since,If-Node- ...

  8. dcos的问题汇总

    . group 'docker' does not exist 需要手工创建docker组,这一步本来应该是在安装docker的时候来完成的,但是采用yum install的方式不行,需要添加一个do ...

  9. bzoj 2648 SJY摆棋子——KDtree

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2648 第一道KDtree! 学习资料:https://blog.csdn.net/zhl30 ...

  10. 启动新内核出现:Kernel panic - not syncing: Attempted to kill init! exitcode=0x00000004

    转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/51841281 启动新内核出现错误:Kernel panic - not synci ...