目錄結(jié)構(gòu)
目錄結(jié)構(gòu)
- 處理圖片（一般是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兩個(gè)模塊是圖片處理的必要模塊
相關(guān)文件
//====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文件提取器需要的配置項(xiàng)
var ExtractTextPlugin=require('extract-text-webpack-plugin');
//postcss-loader 需要的配置項(xiàng)
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，更適合圖片，可以將較小的圖片轉(zhuǎn)成base64，減少http請求
// 如下配置，將小于8192byte的圖片轉(zhuǎn)成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的參數(shù)
-
limit= 后面跟的是數(shù)字，加上這個(gè)參數(shù)，圖片文件大小（單位為byte）小于該參數(shù)值的文件會被轉(zhuǎn)換為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目錄中的路徑和圖片生成規(guī)則
如
// 處理之前
.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]表示圖片文件的擴(kuò)展名[hash]表示圖片文件的哈希值注 以上三個(gè)參數(shù)可以自由組合，改變圖片被處理有生成的文件名等信息
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>
