目录结构
目录结构
- 处理图片（一般是css、less、sass中，还有app.js中require的图片文件）
安装模块
npm install webpack style-loader precss postcss-loader css-loader autoprefixer file-loader url-loader --save
- 其中 file-loader url-loader两个模块是图片处理的必要模块
相关文件
//====app.js
require('./styles/index.css');
require('./styles/base.less');
require('./images/user-avater.png');
//====index.css文件
body{
padding: 0px;
margin:0px;
background-color: #f8f8f8;
}
//====base.less
@colorFF:#666;
body{
color: @colorFF;
}
.page{
background-color:#f8f8f8;
position: absolute;
top: 0px;
padding-top:50px;
left: 0px;
right: 0px;
bottom: 60px;
overflow: auto;
&.no-nav{
bottom: 0px;
}
}
nav{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 60px;
display: flex;
border-top:1px solid #ededed;
background-color: #fff;
a:link,a:visited{
text-decoration:none;
flex: 1;
text-align: center;
box-sizing: border-box;
/* border-right: 1px solid #ededed;*/
color: #666;
padding-top: 5px;
}
a:last-child{
border-right: none;
}
a.v-link-active{
color: #FF4354;
}
a i{
display: block;
margin: 0 auto;
width: 25px;
height: 25px;
}
a.home.v-link-active i{
background: url('../images/nav-home-on.png') no-repeat center;
background-size: contain;
}
a.home i{
background: url('../images/nav-home-off.png') no-repeat center;
background-size: contain;
}
a.topics.v-link-active i{
background: url('../images/nav-circle-on.png') no-repeat center;
background-size: contain;
}
a.topics i{
background: url('../images/nav-circle-off.png') no-repeat center;
background-size: contain;
}
a.message.v-link-active i{
background: url('../images/nav-message-on.png') no-repeat center;
background-size: contain;
}
a.message i{
background: url('../images/nav-message-off.png') no-repeat center;
background-size: contain;
}
a.user.v-link-active i{
background: url('../images/nav-mine-on.png') no-repeat center;
background-size: contain;
}
a.user i{
background: url('../images/nav-mine-off.png') no-repeat center;
background-size: contain;
}
}
配置文件（webpack.config.js）
var webpack=require('webpack');
//css文件提取器需要的配置项
var ExtractTextPlugin=require('extract-text-webpack-plugin');
//postcss-loader 需要的配置项
var precss = require('precss');
var autoprefixer = require('autoprefixer');
module.exports = {
entry: {
app:'./src/app.js'
},
output: {
path: './build',
filename: 'js/[name].js'
},
module: {
loaders: [
// 编译css并自动添加css前缀 并将css提取
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader')},
{ test: /\.less$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader!less')},
//=========为了处理图片我们加入以下配置======================
{
// 图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
// 如下配置，将小于8192byte的图片转成base64码
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=../images/[name].[ext]?[hash]',
}
//======================================================
]
},
postcss: function () {
return [precss, autoprefixer];
},
plugins:[
new ExtractTextPlugin('css/app.css'),
]
}
url-loader的参数
-
limit= 后面跟的是数字，加上这个参数，图片文件大小（单位为byte）小于该参数值的文件会被转换为base64编码的形式
（如）
//处理之前
a.home.v-link-active i{
background: url('../images/nav-home-on.png') no-repeat center;
background-size: contain;
}
//处理之后
nav a.home.v-link-active i {
background: url(data:image/png;base64,iVBORw0KGgoAA...BJRU5ErkJggg==) no-repeat center;
background-size: contain;
}
-
name是表示文件被处理之后再bulid目录中的路径和图片生成规则
如
// 处理之前
.page{
position: absolute;
top: 0px;
background-image: url('../images/user-avater.png');
}
//处理之后
.page {
position: absolute;
top: 0px;
background-image: url(./images/user-avater..png?1e0325ccb9b6cb0b41103804d088890d);
}
-
[name]表示图片文件的文件名 -
[ext]表示图片文件的扩展名 -
[hash]表示图片文件的哈希值 -
注 以上三个参数可以自由组合，改变图片被处理有生成的文件名等信息
HTML引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>处理css</title>
<script type="text/javascript" src="build/js/app.js"></script>
<link rel="stylesheet" type="text/css" href="build/css/app.css">
<body>
</body>
</html>
网友评论