webpack4.x 處理less、sass檔案,分離編譯後的css，自動新增css字首,自動消除冗餘css 第七節
阿新 • • 發佈：2018-12-30
處理less檔案
我們建立一個src/less/a.less檔案
@a:red;
#div1{
color: @a;
ul{
li{
list-style: none;
height:30px;
line-height: 30px;
border-bottom: 1px dashed #000;
}
}
}
這時我們就需要相應的loader了
1.安裝less和less-loader的模組
cnpm i less less-loader -D
2.引入
在入口檔案index.js中引入
import './less/a.less';
3.配置
module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,裡面包含一條一條的規則
rules:[
{
// test 表示測試什麼檔案型別
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滾
use:'css-loader',
publicPath:'../' //解決css背景圖的路徑問題
})
},
分離less編譯後的css檔案
module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,裡面包含一條一條的規則
rules:[
{
// test 表示測試什麼檔案型別
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滾
use:'css-loader',
publicPath:'../' //解決css背景圖的路徑問題
})
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({ //分離less編譯後的css檔案
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 這裡的options選項引數可以定義多大的圖片轉換為base64
limit:50000, // 表示小於50kb的圖片轉為base64,大於50kb的是路徑
outputPath:'images' //定義輸出的圖片資料夾
}
}]
}
]
},
處理sass檔案
1.安裝sass和sass-loader
cnpm i node-sass sass-loader -D
建立一個src/sass/a.sass檔案
$color:green;
#div2{
color: $color;
}
-
module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,裡面包含一條一條的規則
rules:[
{
// test 表示測試什麼檔案型別
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滾
use:'css-loader',
publicPath:'../' //解決css背景圖的路徑問題
})
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({ //分離less編譯後的css檔案
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 這裡的options選項引數可以定義多大的圖片轉換為base64
limit:50000, // 表示小於50kb的圖片轉為base64,大於50kb的是路徑
outputPath:'images' //定義輸出的圖片資料夾
}
}]
}
]
},
自動新增css字首
postCss 前處理器
專門處理css平臺
1.下載
cnpm i postcss-loader autoprefixer -D
2.準備建一個 postcss.config.js檔案 配置postcss的
module.exports = {
plugins:[
require('autoprefixer') // 自動新增css字首
]
}
3.配置postcss-loader,自動新增css字首
module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,裡面包含一條一條的規則
rules:[
{
// test 表示測試什麼檔案型別
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滾
use:[
{loader:'css-loader'},
{loader:'postcss-loader'} //利用postcss-loader自動新增css字首
],
publicPath:'../' //解決css背景圖的路徑問題
})
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({ //分離less編譯後的css檔案
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 這裡的options選項引數可以定義多大的圖片轉換為base64
limit:50000, // 表示小於50kb的圖片轉為base64,大於50kb的是路徑
outputPath:'images' //定義輸出的圖片資料夾
}
}]
}
]
},
自動消除冗餘的css程式碼
使用Purifycss
1.下載
cnpm i purifycss-webpack purify-css -D
2.引入外掛
const PurifyCssWebpack = require('purifycss-webpack');
3.需要引入一個額外模組,glob掃描路徑
cnpm i glob -D
4.引入glob
const glob = require('glob');
5.在plugins裡面配置
plugins:[
// Uglify是壓縮js,現在已經不需要了,只需要在script裡面寫成
// "build": "webpack --mode production", 就自動壓縮額
//new Uglify(),
new Webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title:'Hello World',
template: './src/index.html' //模板地址
}),
new ExtractTextPlugin('css/index.css'), //都提到dist目錄下的css目錄中,檔名是index.css裡面
new PurifyCssWebpack({ //消除冗餘程式碼
// 首先保證找路徑不是非同步的,所以這裡用同步的方法
// path.join()也是path裡面的方法,主要用來合併路徑的
// 'src/*.html' 表示掃描每個html的css
paths:glob.sync(path.join(__dirname,'src/*.html'))
})
]