webpack之Plugins和Loaders简介及常用插件清单

饭要一口一口吃,路要一步一步走,webpack不能再稀里糊涂的拷来拷去了,先来了解一下常用的Plugins和Loaders

Loaders简介

用途

loader是webpack中一个重要的概念,它是指用来将一段代码转换成另一段代码的webpack插件。为什么需要将一段代码转换成另一段代码呢?这是因为webpack实际上只能处理JS文件,如果需要使用一些非JS文件(比如Coffee Script),就需要将它转换成JS再require进来。当然,这个代码转换的过程能做的远不止是Coffee->JS这么简单,比如编译Less/SASS/CoffeeScript,比如在页面中插入一段HTML,比如修改替换文本文件等等。

串联

loader是可以串联使用的,也就是说,一个文件可以先经过A-loader再经过B-loader最后再经过C-loader处理。而在经过所有的loader处理之前,webpack会先取到文件内容交给第一个loader。

1
require('style!css!./style.css');

常用Loaders清单

官方list-of-loaders

style-loader

将css添加到DOM的内联样式标签style里

css-loader

允许将css文件通过require的方式引入,并返回css代码

less-loader

处理less

sass-loader

处理sass

postcss-loader

用postcss来处理CSS

autoprefixer-loader

处理CSS3属性前缀,已被弃用,建议直接使用postcss

file-loader

分发文件到output目录并返回相对路径

url-loader

和file-loader类似,但是当文件小于设定的limit时可以返回一个Data Url

html-minify-loader

压缩HTML

babel-loader

用babel来转换ES6文件到ES5

Plugins简介

其实webpack的loaders和plugins都可以翻译成插件,但是plugin是比loader功能更强大的插件,能使用更多的wepack api。

常用Plugins清单

官方list-of-plugins

ProvidePlugin

提供类似jQuery的$全局变量

CommonsChunkPlugin

插件用法比较多,常用的是把一些不经常更改的公共组件合并压缩成一个common文件

ExtractTextPlugin

将CSS生产独立文件,不做内联

NoErrorsPlugin

报错停止打包但是不退出webpack进程

UglifyJsPlugin

压缩JS

HotModuleReplacementPlugin

代码热替换

HtmlWebpackPlugin

创建html文件,配合ExtractTextPlugin可以加入打包后的js和css

参考:
http://www.alloyteam.com/2016/01/webpack-use-optimization/
https://rhadow.github.io/2015/05/30/webpack-loaders-and-plugins/