{"version":3,"sources":["webpack:///547.3b324cbb.js","webpack:///how-vux-loader-works-462.vue","webpack:///./~/v-markdown-loader/_cache/how-vux-loader-works-462.vue","webpack:///./~/v-markdown-loader/_cache/how-vux-loader-works-462.vue?2761","webpack:///./zh-CN/vux-loader/how-vux-loader-works.md"],"names":["webpackJsonp","1096","module","__webpack_exports__","__webpack_require__","Object","defineProperty","value","head","title","ignoreSuffixChar","2050","exports","Component","options","__file","esModule","keys","some","key","substr","console","error","functional","2728","render","_vm","this","_h","$createElement","_self","_c","_m","staticRenderFns","_v","staticClass","attrs","href","_withStripped","926"],"mappings":"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","file":"547.3b324cbb.js","sourcesContent":["webpackJsonp([547],{\n\n/***/ 1096:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  head: { \"title\": \"vux-loader 实现方式 | VUX - Vue 移动端 UI 组件库\", \"ignoreSuffixChar\": \"|\" }\n});\n\n/***/ }),\n\n/***/ 2050:\n/***/ (function(module, exports, __webpack_require__) {\n\nvar disposed = false\nvar Component = __webpack_require__(67)(\n  /* script */\n  __webpack_require__(1096),\n  /* template */\n  __webpack_require__(2728),\n  /* styles */\n  null,\n  /* scopeId */\n  null,\n  /* moduleIdentifier (server only) */\n  null\n)\nComponent.options.__file = \"/data/vux/home/websites/vux-repo/docs/node_modules/v-markdown-loader/_cache/how-vux-loader-works-462.vue\"\nif (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== \"default\" && key.substr(0, 2) !== \"__\"})) {console.error(\"named exports are not supported in *.vue files.\")}\nif (Component.options.functional) {console.error(\"[vue-loader] how-vux-loader-works-462.vue: functional components are not supported with templates, they should use render functions.\")}\n\n/* hot reload */\nif (false) {(function () {\n  var hotAPI = require(\"vue-hot-reload-api\")\n  hotAPI.install(require(\"vue\"), false)\n  if (!hotAPI.compatible) return\n  module.hot.accept()\n  if (!module.hot.data) {\n    hotAPI.createRecord(\"data-v-4fd97d04\", Component.options)\n  } else {\n    hotAPI.reload(\"data-v-4fd97d04\", Component.options)\n  }\n  module.hot.dispose(function (data) {\n    disposed = true\n  })\n})()}\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n\n/***/ 2728:\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _vm._m(0)\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _c('div', [_c('h1', [_vm._v(\"vux-loader 实现方式\")]), _vm._v(\" \"), _c('p', [_vm._v(\"说明一下\"), _c('code', [_vm._v(\"vux-loader\")]), _vm._v(\"是如何和\"), _c('code', [_vm._v(\"vue-loader\")]), _c('del', [_vm._v(\"搞基\")]), _vm._v(\"配合的。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"如果你看过\"), _c('code', [_vm._v(\"webpack\")]), _vm._v(\"loader的介绍，理论上说如果需要自己手动先处理代码再传入\"), _c('code', [_vm._v(\"vue-loader\")]), _vm._v(\",你只需要这样对loader做配置: \"), _c('code', [_vm._v(\"vue-loader!my-loader\")]), _vm._v(\"。但是如果你试过，就知道这个目前行不通。\"), _c('code', [_vm._v(\"vue-loader\")]), _vm._v(\"不会接收上一个loader的source进行处理，因为.vue文件的特殊性，它直接生成了loader string进入下一个处理，处理后的结果大概是这样的：\")]), _vm._v(\" \"), _c('pre', {\n    staticClass: \"hljs\"\n  }, [_c('code', [_c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* styles */\")]), _vm._v(\"\\n\"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\\n\"), _c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* script */\")]), _vm._v(\"\\n__vue_exports__ = \"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\\n\"), _c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* template */\")]), _vm._v(\"\\n\"), _c('span', {\n    staticClass: \"hljs-keyword\"\n  }, [_vm._v(\"var\")]), _vm._v(\" __vue_template__ = \"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"那么vue-loader提供了自定义loader string的选项，直接配置可否呢，\"), _c('a', {\n    attrs: {\n      \"href\": \"https://github.com/vuejs/vue-loader/issues/531\"\n    }\n  }, [_vm._v(\"#531\")]), _vm._v(\"，直接配置会破坏原来的loader参数，导致不能Live reload。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"那么最终能想到的就是直接修改\"), _c('code', [_vm._v(\"vue-loader\")]), _vm._v(\"生成的代码，这样既不会影响\"), _c('code', [_vm._v(\"vue-loader\")]), _vm._v(\"原来的逻辑，也能自由控制。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"最终实现方式是前置\"), _c('code', [_vm._v(\"vux-loader\")]), _vm._v(\"即：\"), _c('code', [_vm._v(\"vux-loader!vue-loader\")]), _vm._v(\"，vux-loader将vue-loader生成的代码二次处理，分割loader string并(强行)插入vux的 template-loader, style-loader, script-loader，那么你就能理解vux-loader的配置方式了，在3大基本loader里获取到vux-loader的插件配置列表逐个做处理就行了。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"上面的代码强行处理后是这样的：\")]), _vm._v(\" \"), _c('pre', {\n    staticClass: \"hljs\"\n  }, [_c('code', [_c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* styles */\")]), _vm._v(\"\\n\"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\\n\"), _c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* script */\")]), _vm._v(\"\\n__vue_exports__ = \"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./../../../../vux-loader/src/script-loader.js!./index.vue\\\"\")]), _vm._v(\")\\n\\n\"), _c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* template */\")]), _vm._v(\"\\n\"), _c('span', {\n    staticClass: \"hljs-keyword\"\n  }, [_vm._v(\"var\")]), _vm._v(\" __vue_template__ = \"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"原理就是这么简单（但是处理时还是遇到一些问题），为了方便使用，编写了常用的一些插件。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"至于\"), _c('code', [_vm._v(\"js-parser\")]), _vm._v(\"就只是在\"), _c('code', [_vm._v(\"babel-loader\")]), _vm._v(\"前加上了\"), _c('code', [_vm._v(\"vux-loader\")]), _vm._v(\"的\"), _c('code', [_vm._v(\"js-loader\")]), _vm._v(\"。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"而所有的loader, plugins设置都是在\"), _c('code', [_vm._v(\"vux-loader\")]), _vm._v(\"的\"), _c('code', [_vm._v(\"merge\")]), _vm._v(\"方法里来完成。\")])])\n}]}\nmodule.exports.render._withStripped = true\nif (false) {\n  module.hot.accept()\n  if (module.hot.data) {\n     require(\"vue-hot-reload-api\").rerender(\"data-v-4fd97d04\", module.exports)\n  }\n}\n\n/***/ }),\n\n/***/ 926:\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(2050);\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// 547.3b324cbb.js","<template><div><h1>vux-loader 实现方式</h1>\n<p>说明一下<code>vux-loader</code>是如何和<code>vue-loader</code><del>搞基</del>配合的。</p>\n<p>如果你看过<code>webpack</code>loader的介绍，理论上说如果需要自己手动先处理代码再传入<code>vue-loader</code>,你只需要这样对loader做配置: <code>vue-loader!my-loader</code>。但是如果你试过，就知道这个目前行不通。<code>vue-loader</code>不会接收上一个loader的source进行处理，因为.vue文件的特殊性，它直接生成了loader string进入下一个处理，处理后的结果大概是这样的：</p>\n<pre class=\"hljs\"><code><span class=\"hljs-comment\">/* styles */</span>\n<span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&amp;index=0!./index.vue\"</span>)\n\n<span class=\"hljs-comment\">/* script */</span>\n__vue_exports__ = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">\"!!babel-loader!vue-loader/lib/selector?type=script&amp;index=0!./index.vue\"</span>)\n\n<span class=\"hljs-comment\">/* template */</span>\n<span class=\"hljs-keyword\">var</span> __vue_template__ = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&amp;index=0!./index.vue\"</span>)\n</code></pre>\n<p>那么vue-loader提供了自定义loader string的选项，直接配置可否呢，<a href=\"https://github.com/vuejs/vue-loader/issues/531\">#531</a>，直接配置会破坏原来的loader参数，导致不能Live reload。</p>\n<p>那么最终能想到的就是直接修改<code>vue-loader</code>生成的代码，这样既不会影响<code>vue-loader</code>原来的逻辑，也能自由控制。</p>\n<p>最终实现方式是前置<code>vux-loader</code>即：<code>vux-loader!vue-loader</code>，vux-loader将vue-loader生成的代码二次处理，分割loader string并(强行)插入vux的 template-loader, style-loader, script-loader，那么你就能理解vux-loader的配置方式了，在3大基本loader里获取到vux-loader的插件配置列表逐个做处理就行了。</p>\n<p>上面的代码强行处理后是这样的：</p>\n<pre class=\"hljs\"><code><span class=\"hljs-comment\">/* styles */</span>\n<span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&amp;index=0!./index.vue\"</span>)\n\n<span class=\"hljs-comment\">/* script */</span>\n__vue_exports__ = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">\"!!babel-loader!vue-loader/lib/selector?type=script&amp;index=0!./../../../../vux-loader/src/script-loader.js!./index.vue\"</span>)\n\n<span class=\"hljs-comment\">/* template */</span>\n<span class=\"hljs-keyword\">var</span> __vue_template__ = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&amp;index=0!./index.vue\"</span>)\n</code></pre>\n<p>原理就是这么简单（但是处理时还是遇到一些问题），为了方便使用，编写了常用的一些插件。</p>\n<p>至于<code>js-parser</code>就只是在<code>babel-loader</code>前加上了<code>vux-loader</code>的<code>js-loader</code>。</p>\n<p>而所有的loader, plugins设置都是在<code>vux-loader</code>的<code>merge</code>方法里来完成。</p>\n</div></template><script>\nexport default {\n  head: {\"title\":\"vux-loader 实现方式 | VUX - Vue 移动端 UI 组件库\",\"ignoreSuffixChar\":\"|\"}\n}\n  </script>\n\n\n// WEBPACK FOOTER //\n// how-vux-loader-works-462.vue?a45ed2ce","var disposed = false\nvar Component = require(\"!../../ream/node_modules/vue-loader/lib/component-normalizer\")(\n  /* script */\n  require(\"!!babel-loader!../../ream/node_modules/vue-loader/lib/selector?type=script&index=0!./how-vux-loader-works-462.vue\"),\n  /* template */\n  require(\"!!../../ream/node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-4fd97d04\\\"}!../../ream/node_modules/vue-loader/lib/selector?type=template&index=0!./how-vux-loader-works-462.vue\"),\n  /* styles */\n  null,\n  /* scopeId */\n  null,\n  /* moduleIdentifier (server only) */\n  null\n)\nComponent.options.__file = \"/data/vux/home/websites/vux-repo/docs/node_modules/v-markdown-loader/_cache/how-vux-loader-works-462.vue\"\nif (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== \"default\" && key.substr(0, 2) !== \"__\"})) {console.error(\"named exports are not supported in *.vue files.\")}\nif (Component.options.functional) {console.error(\"[vue-loader] how-vux-loader-works-462.vue: functional components are not supported with templates, they should use render functions.\")}\n\n/* hot reload */\nif (module.hot) {(function () {\n  var hotAPI = require(\"vue-hot-reload-api\")\n  hotAPI.install(require(\"vue\"), false)\n  if (!hotAPI.compatible) return\n  module.hot.accept()\n  if (!module.hot.data) {\n    hotAPI.createRecord(\"data-v-4fd97d04\", Component.options)\n  } else {\n    hotAPI.reload(\"data-v-4fd97d04\", Component.options)\n  }\n  module.hot.dispose(function (data) {\n    disposed = true\n  })\n})()}\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/ream/~/vue-loader!./~/v-markdown-loader/_cache/how-vux-loader-works-462.vue\n// module id = 2050\n// module chunks = 547","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _vm._m(0)\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _c('div', [_c('h1', [_vm._v(\"vux-loader 实现方式\")]), _vm._v(\" \"), _c('p', [_vm._v(\"说明一下\"), _c('code', [_vm._v(\"vux-loader\")]), _vm._v(\"是如何和\"), _c('code', [_vm._v(\"vue-loader\")]), _c('del', [_vm._v(\"搞基\")]), _vm._v(\"配合的。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"如果你看过\"), _c('code', [_vm._v(\"webpack\")]), _vm._v(\"loader的介绍，理论上说如果需要自己手动先处理代码再传入\"), _c('code', [_vm._v(\"vue-loader\")]), _vm._v(\",你只需要这样对loader做配置: \"), _c('code', [_vm._v(\"vue-loader!my-loader\")]), _vm._v(\"。但是如果你试过，就知道这个目前行不通。\"), _c('code', [_vm._v(\"vue-loader\")]), _vm._v(\"不会接收上一个loader的source进行处理，因为.vue文件的特殊性，它直接生成了loader string进入下一个处理，处理后的结果大概是这样的：\")]), _vm._v(\" \"), _c('pre', {\n    staticClass: \"hljs\"\n  }, [_c('code', [_c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* styles */\")]), _vm._v(\"\\n\"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\\n\"), _c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* script */\")]), _vm._v(\"\\n__vue_exports__ = \"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\\n\"), _c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* template */\")]), _vm._v(\"\\n\"), _c('span', {\n    staticClass: \"hljs-keyword\"\n  }, [_vm._v(\"var\")]), _vm._v(\" __vue_template__ = \"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"那么vue-loader提供了自定义loader string的选项，直接配置可否呢，\"), _c('a', {\n    attrs: {\n      \"href\": \"https://github.com/vuejs/vue-loader/issues/531\"\n    }\n  }, [_vm._v(\"#531\")]), _vm._v(\"，直接配置会破坏原来的loader参数，导致不能Live reload。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"那么最终能想到的就是直接修改\"), _c('code', [_vm._v(\"vue-loader\")]), _vm._v(\"生成的代码，这样既不会影响\"), _c('code', [_vm._v(\"vue-loader\")]), _vm._v(\"原来的逻辑，也能自由控制。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"最终实现方式是前置\"), _c('code', [_vm._v(\"vux-loader\")]), _vm._v(\"即：\"), _c('code', [_vm._v(\"vux-loader!vue-loader\")]), _vm._v(\"，vux-loader将vue-loader生成的代码二次处理，分割loader string并(强行)插入vux的 template-loader, style-loader, script-loader，那么你就能理解vux-loader的配置方式了，在3大基本loader里获取到vux-loader的插件配置列表逐个做处理就行了。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"上面的代码强行处理后是这样的：\")]), _vm._v(\" \"), _c('pre', {\n    staticClass: \"hljs\"\n  }, [_c('code', [_c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* styles */\")]), _vm._v(\"\\n\"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\\n\"), _c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* script */\")]), _vm._v(\"\\n__vue_exports__ = \"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./../../../../vux-loader/src/script-loader.js!./index.vue\\\"\")]), _vm._v(\")\\n\\n\"), _c('span', {\n    staticClass: \"hljs-comment\"\n  }, [_vm._v(\"/* template */\")]), _vm._v(\"\\n\"), _c('span', {\n    staticClass: \"hljs-keyword\"\n  }, [_vm._v(\"var\")]), _vm._v(\" __vue_template__ = \"), _c('span', {\n    staticClass: \"hljs-built_in\"\n  }, [_vm._v(\"require\")]), _vm._v(\"(\"), _c('span', {\n    staticClass: \"hljs-string\"\n  }, [_vm._v(\"\\\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&index=0!./index.vue\\\"\")]), _vm._v(\")\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"原理就是这么简单（但是处理时还是遇到一些问题），为了方便使用，编写了常用的一些插件。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"至于\"), _c('code', [_vm._v(\"js-parser\")]), _vm._v(\"就只是在\"), _c('code', [_vm._v(\"babel-loader\")]), _vm._v(\"前加上了\"), _c('code', [_vm._v(\"vux-loader\")]), _vm._v(\"的\"), _c('code', [_vm._v(\"js-loader\")]), _vm._v(\"。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"而所有的loader, plugins设置都是在\"), _c('code', [_vm._v(\"vux-loader\")]), _vm._v(\"的\"), _c('code', [_vm._v(\"merge\")]), _vm._v(\"方法里来完成。\")])])\n}]}\nmodule.exports.render._withStripped = true\nif (module.hot) {\n  module.hot.accept()\n  if (module.hot.data) {\n     require(\"vue-hot-reload-api\").rerender(\"data-v-4fd97d04\", module.exports)\n  }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/ream/~/vue-loader/lib/template-compiler?{\"id\":\"data-v-4fd97d04\"}!./~/ream/~/vue-loader/lib/selector.js?type=template&index=0!./~/v-markdown-loader/_cache/how-vux-loader-works-462.vue\n// module id = 2728\n// module chunks = 547","module.exports = require(\"!!vue-loader!../../node_modules/v-markdown-loader/_cache/how-vux-loader-works-462.vue\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./zh-CN/vux-loader/how-vux-loader-works.md\n// module id = 926\n// module chunks = 547"],"sourceRoot":""}