<强> 1。自动补全css3前缀
autoprefixer
官方是这样说的:解析CSS和使用值添加前缀CSS规则我可以用的网站,也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。
<强>举个栗子:最新的弹性盒模型通量
实际代码:
:全屏{
显示:flex
}
之前
插件自动补充后
一个{
显示:-webkit-box;
显示:-webkit-flex;
显示:-ms-flexbox;
显示:flex
}
效果显而易见,我们可以更专注于css布局和美化,而不需要花过多的精力都写相同的外码而加上不同的前缀,也减少了冗余代码。
使用方法:
cnpm安装——save-dev autoprefixer postcss-loader
var autoprefixer=要求(“autoprefixer”);
module.exports={//其他配置这里就不写了
模块:{
加载器:(
{
测试:/\ . css/美元,//在原有基础上加上一个postcss的加载程序就可以了
加载器:[‘style-loader’,‘css-loader’,‘postcss-loader’)
}
]
}，
postcss:(autoprefixer({浏览器:['最后2版本']}))
}
之前
<强> 2。自动生成html的插件
html-webpack-plugin
cnpm安装html-webpack-plugin——save-dev
之前
//webpack.config.js
var HtmlWebpackPlugin=要求(“html-webpack-plugin”);
module.exports={
条目:“。/index.js”,
输出:{
路径:__dirname +/dist,
文件名:“bundle.js”
}
插件:[
新的HtmlWebpackPlugin ()
]
}
之前
作用:它会在dist目录下自动生成一个索引。html
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Webpack App
& lt;/head>
& lt; body>
& lt;脚本src=" https://www.yisu.com/zixun/bundle.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
之前
其他配置参数:
{
条目:“index.js”,
输出:{
路径:“距离”,
文件名:“bundle.js”
}，
插件:[
新HtmlWebpackPlugin ({
标题:“我的应用”,
文件名:“admin.html”,
模板:“header.html”,
注射:“身体”,
标识:“。/图片/favico.ico ',
使变小:没错,
散列:没错,
缓存:假的,
showErrors:假的,
“块”:{
"正":{
“条目”:“资产/head_bundle.js”,
“css”:“主要。css”)
}，
xhtml:假
}）
]
}
之前
- - -标题。html - - -
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> & lt; %=htmlWebpackPlugin.options。标题%祝辞& lt;/title>
& lt;/head>
& lt; body>
& lt;/body>
& lt;/html>
之前
作用:
<李>标题:设置标题的名字,,李
<李>文件名:设置这个html的文件名,,李
<李>模板:要使用的模块的路径,李
<李>注入:把模板注入到哪个标签后的身体,,,李
<李>图标:给html添加一个favicon ”。/图片/favico.ico’,,,李
<李>贬低:是否压缩,{…}| false(最新api变动,原来是真正|假感谢@onmi指正)
<李>哈希:是否散列化真的假的,,,,,李
<李>缓存:是否缓存,,,李
<李> showErrors:是否显示错误,,李
<李>块:目前没太明白,李
<李> xhtml:是否自动毕业标签默认false 李
<强> 3。提取样式插件
extract-text-webpack-plugin
官网是这么解释的从包中提取文本到一个文件中。,把额外的数据加到编译好的文件中
var ExtractTextPlugin=要求(“extract-text-webpack-plugin”);
模块。出口={
模块:{
加载器:(
{测试:/\。css/美元,装载机:ExtractTextPlugin。提取(“style-loader”、“css-loader”)}
]
}，
插件:[
新HtmlWebpackPlugin ({
模板:“。/src/公共/index . html”,
注射:“身体”
}),
新ExtractTextPlugin(“[名字]。(哈希). css”)
]
}
