webpack 的 loader 和 plugin
引子
webpack 是现在前端开发常用的打包工具，上手简单，但是有很多概念比较难懂。这里整理下，方便以后查阅。
loader 和 plugin
主要区别
loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。
plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也时变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。
常用的plugin
- CommonsChunkPlugin 创建一个公用的chunk，常用于将第三方lib抽取成公用js，例如
entry: {
vendor: ["jquery", "other-lib"],
app: "./entry"
}
new CommonsChunkPlugin({
name: "vendor",
filename: "vendor.js",
minChunks: Infinity
})- HotModuleReplacementPlugin
启用module热替换
更多的在这里
常用的loader
loader的功能就是加载资源到webpack
- css 和 style
cssloader 和 styleloader 做两件事情
- css-loader 遍历所有require的css文件，输出文件内容
- style-loader 将css内容输出到页面的style标签中
所以，在 webpack.config.js 中， css的配置是这样的
{ test: /\.css$/, loader: "style!css" }style!css类似一种输出重定向，css-loader的输出会作为style-loader的输入。
如果使用了css预处理器，比如less，那么只需要在最后加上less的laoder
{ test: /\.css$/, loader: "style!css!less" }另一种写法（推荐）
{ test: /\.css$/, loaders: ["style","css","less"] }更多的在这里
总结
loader 用于加载待打包的资源，plugin 用于扩展 webpack。