详解webpack进阶之插件篇

前端之家收集整理的这篇文章主要介绍了详解webpack进阶之插件篇前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、插件

1. 自动补全css3前缀

autoprefixer

官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website,也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件

举个栗子:最新的弹性盒模型flux

实际代码

插件自动补充后

Box; display: -webkit-flex; display: -ms-flexBox; display: flex }

效果显而易见,我们可以更专注于css布局和美化,而不需要花过多的精力都写相同的外码而加上不同的前缀,也减少了冗余代码

使用方法:

css-loader
module:{
loaders:[
{
test:/.css$/,//在原有基础上加上一个postcss的loader就可以了
loaders:['style-loader','css-loader','postcss-loader']
}
]
},postcss:[autoprefixer({browsers:['last 2 versions']})]

}

2. 自动生成html插件

html-webpack-plugin

作用:它会在dist目录下自动生成一个index.html

<Meta charset="UTF-8"> Webpack App

猜你在找的JavaScript相关文章