详解webpack进阶之插件篇

一、插件

1. 自动补全css3前缀

autoprefixer

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

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

实际代码

rush:css;"> :fullscreen a { display: flex }

插件自动补充后

rush:css;"> a { display: -webkit-Box; display: -webkit-flex; display: -ms-flexBox; display: flex }

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

使用方法:

rush:bash;"> cnpm install --save-dev autoprefixer postcss-loader
rush:js;"> var autoprefixer = require('autoprefixer'); module.exports={ //其他配置这里就不写了

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

}

2. 自动生成html插件

html-webpack-plugin

rush:bash;"> cnpm install html-webpack-plugin --save-dev
rush:js;"> //webpack.config.js var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports={ entry:'./index.js',output:{ path:__dirname+'/dist',filename:'bundle.js' } plugins:[ new HtmlWebpackPlugin() ] }

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

rush:xhtml;"> <Meta charset="UTF-8"> Webpack App