大家好,又见面了,我是你们的朋友全栈君。
我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。
下面,咱们一起来学学如何用webpack来处理less,sass等预编译器。先看看如何用webpack处理less。
国际惯例,第一步是安装:
npm install less less-loader --save-dev
第二步,配置loader项:
{ test: /\.less$/, use: [{ loader: "style-loader" },{ loader: "css-loader" },{ loader: "less-loader" }] }
最后,咱们来写一个less试试,直接在src/css/目录下,新建一个pink.less文件并写一些代码:
@base :pink; #lessDiv{ width:300px; height:300px; background-color:@base; }
还要在src/index.html中加入一个id名为#lessDiv的div,最重要的一点,不要忘了在src/entry.js中引入pink.less,引入的方法跟引入css文件是一样的。
不知道大家还记不记的咱们在处理css文件的时候做过一件事情,也就是把css从js中分离出来,因为webpack打包是把css打包进js的,所以我们修改一下loader的配置方式,跟前面的css是一样的,这里不再赘述,直接上代码:
{ test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], fallback: "style-loader" }) }
你可以试试,这两种代码打包之后会有什么样的区别,OK,我们npm run server一下,会发现页面中已经出现了一个粉色的盒子。
那么说完了less,继续说一下sass。仍旧是安装,配置。。。不多说,直接上代码:
npm install node-sass --save-dev npm install sass-loader --save-dev /*如果安装报错,可以试一下cnpm或者分开单独安装*/
配置loader:
{ test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] }
跟less一样编写一个scss文件写入sass代码并且在entry.js中引入,别忘了在index.html中写个div:
// css/blue.scss $color: blue; #sassDiv { $width: 100%; width: $width; height:200px; background-color: $color; } // index.html加入 <div id="sassDiv"></div> //entry.js中引入 import sass from './css/blue.scss';
同样的,把sass从js中分离,修改loader配置:
{ test: /\.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" }], fallback: "style-loader" }) }
npm run server后发现蓝色的div已经出现。其实大家可以自己去试着写一下sass的配置。因为跟less甚至之前的css几乎是一摸一样的。没有什么大的区别。那么下面咱们一起看看css3属性自动加上前缀,极大的方便我们的开发。
自动加前缀,我们需要用到postCss和autoprefixer,那么安装一下吧:
npm install --save-dev postcss-loader autoprefixer
我们新建一个postcss.config.js,与webpack.config.js同级,并且写入相关代码,也就是引入autoprefixer:
module.exports = { plugins: [ require('autoprefixer') ] }
然后把我们之前写过的css-loader的配置修改一下:
{ test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } }, { loader: "postcss-loader" } ] }
分离:
{ test: /\.css$/, use: extractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }) }
那么,我们随便在index.css中加上点css3的样式试试吧。至此,当你npm run build 之后多半会发现既不报错,但是index.css中也没有加上相应的前缀。那么你需要在package.json中写入如下配置:
"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]
什么意思呢?也就是全球浏览器使用率大于1%,最新的两个版本并且是ie8以上的浏览器。还有更多的参数可以查看这里https://github.com/ai/browserslist#queries。
增加了这个配置之后,再打包就完全没问题啦。
那么我们下面学习一下如何消除未使用的css,在实际项目中,我们可能会引入很多样式库,组件库,或者随着项目需求的增加,我们可能会添加一些新的css,而以前的css又不知道有没有用,也不敢去动,害怕牵一发而动全身。所以我们可以使用一个插件,在打包的时候自动去除未使用的css样式:
/*PurifyCSS-webpack要依赖于purify-css这个包,所以这两个都安装一下,-D是--save-dev的简写,i是install的简写*/ npm i -D purifycss-webpack purify-css
然后我们引入glod和purifycss-webpack插件:
const glob = require('glob'); const PurifyCSSPlugin = require("purifycss-webpack"); /*引入插件就不多说了,glob是node的一个对象,我们需要在检查html模板以确定是否用到了css的时候用到glob*/
然后,在plugins里这样配置:
new PurifyCSSPlugin({ paths: glob.sync(path.join(__dirname, 'src/*.html')), }) /*glob.sync同步获取指定文件夹下的文件,这里的意思就是获取src下的所有html文件。有关node的知识不在这里多说,有兴趣的大家可以自行去学习*/
配置成功,我们在src/index.css中写点没用的代码试试吧。发现打包后的css中并没有我们新加的没用的代码,成功!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124437.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...