webpack4.x 处理less、sass文件,分离编译后的css，自动添加css前缀,自动消除冗余css 第七节 - 好文

处理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背景图的路径问题 }) }, { test:/\.less$/,
use:['style-loader','css-loader','less-loader'] // 编译顺序从右往左 }, {
test:/\.(png|jpg|gif)$/, use:[{ loader:'url-loader', options:{ //
这里的options选项参数可以定义多大的图片转换为base64 limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
outputPath:'images' //定义输出的图片文件夹 } }] } ] },
分离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')) }) ]

热门工具换一换