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。