1. 自动补全css3前缀
autoprefixer
官方是这样说的：Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website，也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。
举个栗子：最新的弹性盒模型flux
实际代码：
:fullscreen a { display: flex }
插件自动补充后
a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex }
效果显而易见，我们可以更专注于css布局和美化，而不需要花过多的精力都写相同的外码而加上不同的前缀，也减少了冗余代码。
使用方法:
cnpm install --save-dev autoprefixer postcss-loader
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
cnpm install html-webpack-plugin --save-dev
//webpack.config.js var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports={ entry:'./index.js', output:{ path:__dirname+'/dist', filename:'https://www.jb51.net/bundle.js' } plugins:[ new HtmlWebpackPlugin() ] }
作用:它会在dist目录下自动生成一个index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script src="https://www.jb51.net/bundle.js"></script> </body> </html>
其他配置参数:
{ entry: 'index.js', output: { path: 'dist', filename: 'https://www.jb51.net/bundle.js' }, plugins: [ new HtmlWebpackPlugin({ title: 'My App', filename: 'admin.html', template:'header.html', inject: 'body', favicon:'./images/favico.ico', minify:true, hash:true, cache:false, showErrors:false, "chunks": { "head": { "entry": "assets/head_bundle.js", "css": [ "main.css" ] }, xhtml:false }) ] }
--- header.html --- <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html>
作用：
title: 设置title的名字
filename: 设置这个html的文件名
template:要使用的模块的路径
inject: 把模板注入到哪个标签后 'body',
favicon: 给html添加一个favicon './images/favico.ico',
minify:是否压缩 {...} | false （最新api变动，原来是ture|false 感谢@onmi指正)
hash:是否hash化 true false ,
cache:是否缓存,
showErrors:是否显示错误,
chunks:目前没太明白
xhtml:是否自动毕业标签 默认false
3. 提取样式插件
extract-text-webpack-plugin
官网是这么解释的Extract text from bundle into a file.,把额外的数据加到编译好的文件中
var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/public/index.html', inject: 'body' }), new ExtractTextPlugin("[name].[hash].css") ] }
说明：将css放到index.html的body上面
4. 拷贝资源插件
copy-webpack-plugin
官方这样解释 Copy files and directories in webpack,在webpack中拷贝文件和文件夹
cnpm install --save-dev copy-webpack-plugin
new CopyWebpackPlugin([{ from: __dirname + '/src/public' }]),
作用：把public 里面的内容全部拷贝到编译目录
参数
作用
其他说明
from
定义要拷贝的源目录
from: __dirname + '/src/public'
to
定义要烤盘膛的目标目录
from: __dirname + '/dist'
toType
file 或者 dir
可选，默认是文件
force
强制覆盖先前的插件
可选 默认false
context
不知道作用
可选 默认 base context 可用 specific context
flatten
只拷贝文件不管文件夹
默认是false
ignore
忽略拷贝指定的文件
可以用模糊匹配
5. 全局挂载插件
webpack.ProvidePlugin [webpack内置插件 ]