头几天在怎样竖立一个webpack loader中提到我要吐槽一下vue-loader，因而本日我就来吐槽了

先来看一段webpack官网的定义：

do only a single task
Loaders can be chained. Create loaders for every step, instead of a loader that does everything at once.

This also means they should not convert to JavaScript if not necessary.

Example: Render HTML from a template file by applying the query parameters

I could write a loader that compiles the template from source, execute it and return a module that exports a string containing the HTML code. This is bad.

啥意思？就是官方引荐一个loader应当只做一件事变，假如关于一个文件有屡次处置惩罚，能够把这些处置惩罚放在差别的loader内里举行链式挪用。比方我们假如要写less，那末我们的webpack配置文件中应当会涌现style!css!less这代表我们关于一个less文件，起首要将less处置惩罚成css，然后再有css-loader举行一些处置惩罚成js可用的css，末了经由过程style-loader一致抛出去。

分工明白吧？如许的优点就是style-loader和css-loader能够复用，sass，stylus都能够这么用。

那末vue-loader做了什么呢？代码我就不贴了，直接说道理吧

起首vue-loader要做的是loader一个.vue文件，这个文件中会包括html，js，css三个部份，终究的处置惩罚结果应当是css处置惩罚经由过程style-loader抛出去的体式格局，html处置惩罚成字符串，js处置惩罚成一个vue-component并require之前的html当作本身的模板，所以终究一个.vue文件终究会变成三个module

越是尤大神就在vue-loader内里做了这么一件事，vue-loader的终究产出以下：

require("!!vue-style-loader!css-loader?sourceMap!./../node_modules/vue-loader/lib/style-rewriter.js!sass!./../node_modules/vue-loader/lib/selector.js?type=style&index=0!./button.vue")
__vue_script__ = require("!!babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./../node_modules/vue-loader/lib/selector.js?type=script&index=0!./button.vue")
if (__vue_script__ &&
    __vue_script__.__esModule &&
    Object.keys(__vue_script__).length > 1) {
  console.warn("[vue-loader] example/button.vue: named exports in *.vue files are ignored.")}
__vue_template__ = require("!!vue-html-loader!./../node_modules/vue-loader/lib/selector.js?type=template&index=0!./button.vue")
module.exports = __vue_script__ || {}
if (module.exports.__esModule) module.exports = module.exports.default
if (__vue_template__) {
(typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__
}
if (module.hot) {(function () {  module.hot.accept()
  var hotAPI = require("vue-hot-reload-api")
  hotAPI.install(require("vue"), true)
  if (!hotAPI.compatible) return
  var id = "/Users/Jokcy/workspace/office/x-vue/example/button.vue"

其中有三个require，这几个require内里的内容前面各不相同，然则末了却有一些相似：

!./../node_modules/vue-loader/lib/selector.js?type=style&index=0!./button.vue

!./../node_modules/vue-loader/lib/selector.js?type=script&index=0!./button.vue

!./../node_modules/vue-loader/lib/selector.js?type=script&index=0!./button.vue

是的，都是经由过程vue-loader内里的一个selector.js去loader同一个.vue文件，也就是vue-loader正在loader的文件

所以：vue-loader基础没有处置惩罚.vue文件内里的内容！！！基础没有！他只是通知你应当特别他的体式格局来loader来处置惩罚这个文件，而且一次来照样三个（你斟酌过.vue文件的觉得么！！！）

能够到这里你们还没以为这有什么不对。那我就来扯一扯

起首这个之前webpack官方的发起就不一致，vue-loader不能举行链式挪用，由于他不接受在vue-loader之前处置惩罚过的内容（由于终究selector.js照样会重新去读一遍源文件），同时你也不能再vue-loader之后去修正一些内容（由于他暴露出来的内容跟原内容没半毛钱关联）。所以vue-loader是一个自力的个别，我们没法对其举行扩大，这致使我们失去了许多具有想象力的做法（比方我要做的就是对特定的.vue文件举行一些处置惩罚，自动天生文档），如许的做法让vue-loader显得有点hack，同时我们也要斟酌如许的做法对将来是不是真的做好了预备。

近来这半年出场看到尤大推行他的vue，并常常跟react比较，以至从某些方面给人觉得vue相较react另有挺大的优越性。实在没必要如许做，如今的vue跟react基础没有可比性，vue现在的生态和react的生态比拟几乎就跟清代群众见了美帝的兵舰一样，这不是你一个人在四周游说vue的优点能抵消的。我并不是说vue不好，我如今在用vue做项目，现在一个vue的组件库也正在竖立中，能够马上回开源，但现在来讲，vue真的没有react好。

但不管怎样，愿望尤大继承勤奋，能够多生长一下社区的气力，强大一下vue的生态圈，生态圈强大了，才有vue更好的生长。