吐槽一下vue-loader

前几天在如何建立一个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更好的发展。