{"_id":"@applaud/vue-loader","name":"@applaud/vue-loader","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@applaud/vue-loader","version":"1.0.0","description":"Vue single-file component loader for Webpack","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"test":"jest --env node","lint":"eslint lib test --fix","build":"webpack --config example/webpack.config.js --hide-modules","dev":"webpack-dev-server --config example/webpack.config.js --inline --hot","docs":"vuepress dev docs","docs:build":"vuepress build docs","prepublishOnly":"conventional-changelog -p angular -r 1 -i CHANGELOG.md -s"},"author":{"name":"Applaud"},"license":"MIT","bugs":{"url":"https://github.com/Applaud-devpack/vue-loader/issues"},"homepage":"https://github.com/Applaud-devpack/vue-loader","repository":{"type":"git","url":"git+https://github.com/Applaud-devpack/vue-loader.git"},"gitHooks":{"pre-commit":"lint-staged"},"keywords":["applaud"],"lint-staged":{"lib/**/*.js":["eslint --fix","git add"],"test/**/*.js":["eslint --fix","git add"]},"peerDependencies":{"css-loader":"*"},"peerDependenciesMeta":{"cache-loader":{"optional":true},"vue-template-compiler":{"optional":true}},"dependencies":{"@vue/component-compiler-utils":"^3.1.0","hash-sum":"^1.0.2","loader-utils":"^2.0.3","vue-hot-reload-api":"^2.3.0","vue-style-loader":"npm:@applaud/vue-style-loader@^1.0.0"},"devDependencies":{"@types/webpack":"^4.4.27","babel-core":"^6.26.0","babel-loader":"^7.1.4","babel-preset-env":"^1.6.1","cache-loader":"^2.0.1","conventional-changelog-cli":"^1.3.22","css-loader":"^1.0.0","eslint":"^4.19.0","eslint-plugin-vue-libs":"^2.1.0","file-loader":"^1.1.11","html-webpack-plugin":"4.0.0-beta.14","javascript-stringify":"^1.6.0","jest":"^23.5.0","jsdom":"^11.6.2","json":"^9.0.6","lint-staged":"^7.0.0","markdown-loader":"^2.0.2","memfs":"^3.1.2","mini-css-extract-plugin":"^0.4.1","normalize-newline":"^3.0.0","null-loader":"^0.1.1","postcss-loader":"^2.1.2","pug":"^2.0.1","pug-plain-loader":"^1.0.0","raw-loader":"^0.5.1","source-map":"^0.5.0","stylus":"^0.54.5","stylus-loader":"^3.0.2","sugarss":"^1.0.1","ts-loader":"^4.2.0","typescript":"^3.9.5","url-loader":"^1.0.1","vue":"^2.5.16","vue-server-renderer":"^2.5.16","vue-template-compiler":"^2.5.16","vuepress":"^0.14.2","vuepress-theme-vue":"^1.1.0","webpack":"npm:@applaud/webpack@^1.0.2","webpack-cli":"^3.2.0","webpack-dev-server":"^3.1.1","webpack-merge":"^4.1.2","yorkie":"^1.0.3"},"gitHead":"d95eaa3e38dbd67e32f31bc056ef3461b927d62f","_id":"@applaud/vue-loader@1.0.0","_nodeVersion":"10.23.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-sw0E4sZBwhvo/YJZf3AFuimIy13rl8ZpudjM1CaUrENSfiMuz1NtGNw/FISHEQKnylhBxpds4h37Yhio0tjQgQ==","shasum":"47fbec970faaced30fd246e762b80329da4ee356","tarball":"https://registry.npmjs.org/@applaud/vue-loader/-/vue-loader-1.0.0.tgz","fileCount":24,"unpackedSize":509312,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR3lMvFl6PsONRdgqawHLVhDicOnbzh2F8ib+A3hCTZwIhAL8RC08G/3VN68JRGckvCCtDWuBY1lw2oKXkjEEfbLev"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdeW2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp52A/+MmG84J/da++u03/SubAeHLSTH0AOSkVfX6vNgZ07YskVNeha\r\niU3HehaZ+VB2E/2rLsiHSQbdOL7RugWG3CSQvl8ojtG9IiGmjpU3qB6Fw4L8\r\nt27ONdAXlm+mwYS+L6ot69pyOkpslRSyA6Sel6sA10u/kDekoGpRWAJMasu3\r\n2H9hqnvG1oU5VVRF/vvzKkr+2y8vE3xgfRT/4RjeFMFfq9A98ILOvt6QFyzB\r\nG7/NhHTGxmGruBLbbtfH9hnDx6OeuaClEsEbvP3t95nu26PV3TRwH21Nm94u\r\nucfcER9ibUbxDg4L+ILQgfglrMLgoOe1A70LoXmnJP9HZk8WNNdMdJdf8lYu\r\n66HB89gm0FCpN62gRu7YzZ0WRR4L6S9jPsSlsumBOq75EcoW5B32cvTNffjD\r\nCEziTwSLAtnwpVufWRfYWtz/o1TYyE+bbWr3mhD7Ngsvb24D/W61bIPiTg+H\r\n2CgvMApLyOTiPKLTE1lrVRFXWJ0aYquoIB020sF+/2SVEjgCKDtna1rPZY1d\r\narugFbUUpmzYAG5wYpz4cKg2TcUSkgnCF5x1z1VrsCwp1UhXwvElPCOPdDKj\r\nbOWR9rrFwByGddxKNqu65WPoGmfDjNbJ937f05j7vEOZr+d/EfZ1bNFXwtuz\r\nO6mWAONjMt/t6ndDoG/tliBajWDLq2X/wM8=\r\n=PY2B\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"},"directories":{},"maintainers":[{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-loader_1.0.0_1668670902176_0.42297109687020606"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-17T07:41:42.101Z","1.0.0":"2022-11-17T07:41:42.399Z","modified":"2022-11-17T07:41:42.564Z"},"maintainers":[{"name":"mahesh_reddy","email":"applaud.devpack@gmail.com"}],"description":"Vue single-file component loader for Webpack","homepage":"https://github.com/Applaud-devpack/vue-loader","keywords":["applaud"],"repository":{"type":"git","url":"git+https://github.com/Applaud-devpack/vue-loader.git"},"author":{"name":"Applaud"},"bugs":{"url":"https://github.com/Applaud-devpack/vue-loader/issues"},"license":"MIT","readme":"# @applaud/vue-loader [![Build Status](https://circleci.com/gh/vuejs/vue-loader/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/master) [![Windows Build status](https://ci.appveyor.com/api/projects/status/8cdonrkbg6m4k1tm/branch/master?svg=true)](https://ci.appveyor.com/project/yyx990803/vue-loader/branch/master)\n\n> webpack loader for Vue Single-File Components\n\n**NOTE:** The master branch now hosts the code for v15! Legacy code is now in the [v14 branch](https://github.com/vuejs/vue-loader/tree/v14).\n\n- [Documentation](https://vue-loader.vuejs.org)\n- [Migrating from v14](https://vue-loader.vuejs.org/migrating.html)\n\n## What is Vue Loader?\n\n`@applaud/vue-loader` is a loader for [webpack](https://webpack.js.org/) that allows you to author Vue components in a format called [Single-File Components (SFCs)](./docs/spec.md):\n\n``` vue\n<template>\n  <div class=\"example\">{{ msg }}</div>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      msg: 'Hello world!'\n    }\n  }\n}\n</script>\n\n<style>\n.example {\n  color: red;\n}\n</style>\n```\n\nThere are many cool features provided by `@applaud/vue-loader`:\n\n- Allows using other webpack loaders for each part of a Vue component, for example Sass for `<style>` and Pug for `<template>`;\n- Allows custom blocks in a `.vue` file that can have custom loader chains applied to them;\n- Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with webpack loaders;\n- Simulate scoped CSS for each component;\n- State-preserving hot-reloading during development.\n\nIn a nutshell, the combination of webpack and `vue-loader` gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.\n\n## How It Works\n\n> The following section is for maintainers and contributors who are interested in the internal implementation details of `vue-loader`, and is **not** required knowledge for end users.\n\n`vue-loader` is not a simple source transform loader. It handles each language blocks inside an SFC with its own dedicated loader chain (you can think of each block as a \"virtual module\"), and finally assembles the blocks together into the final module. Here's a brief overview of how the whole thing works:\n\n1. `vue-loader` parses the SFC source code into an *SFC Descriptor* using `@vue/component-compiler-utils`. It then generates an import for each language block so the actual returned module code looks like this:\n\n    ``` js\n    // code returned from the main loader for 'source.vue'\n\n    // import the <template> block\n    import render from 'source.vue?vue&type=template'\n    // import the <script> block\n    import script from 'source.vue?vue&type=script'\n    export * from 'source.vue?vue&type=script'\n    // import <style> blocks\n    import 'source.vue?vue&type=style&index=1'\n\n    script.render = render\n    export default script\n    ```\n\n    Notice how the code is importing `source.vue` itself, but with different request queries for each block.\n\n2. We want the content in `script` block to be treated like `.js` files (and if it's `<script lang=\"ts\">`, we want to to be treated like `.ts` files). Same for other language blocks. So we want webpack to apply any configured module rules that matches `.js` also to requests that look like `source.vue?vue&type=script`. This is what `VueLoaderPlugin` (`src/plugins.ts`) does: for each module rule in the webpack config, it creates a modified clone that targets corresponding Vue language block requests.\n\n    Suppose we have configured `babel-loader` for all `*.js` files. That rule will be cloned and applied to Vue SFC `<script>` blocks as well. Internally to webpack, a request like\n\n    ``` js\n    import script from 'source.vue?vue&type=script'\n    ```\n\n    Will expand to:\n\n    ``` js\n    import script from 'babel-loader!vue-loader!source.vue?vue&type=script'\n    ```\n\n    Notice the `vue-loader` is also matched because `vue-loader` are applied to `.vue` files.\n\n    Similarly, if you have configured `style-loader` + `css-loader` + `sass-loader` for `*.scss` files:\n\n    ``` html\n    <style scoped lang=\"scss\">\n    ```\n\n    Will be returned by `vue-loader` as:\n\n    ``` js\n    import 'source.vue?vue&type=style&index=1&scoped&lang=scss'\n    ```\n\n    And webpack will expand it to:\n\n    ``` js\n    import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'\n    ```\n\n3. When processing the expanded requests, the main `vue-loader` will get invoked again. This time though, the loader notices that the request has queries and is targeting a specific block only. So it selects (`src/select.ts`) the inner content of the target block and passes it on to the loaders matched after it.\n\n4. For the `<script>` block, this is pretty much it. For `<template>` and `<style>` blocks though, a few extra tasks need to be performed:\n\n    - We need to compile the template using the Vue template compiler;\n    - We need to post-process the CSS in `<style scoped>` blocks, **before** `css-loader`.\n\n    Technically, these are additional loaders (`src/templateLoader.ts` and `src/stylePostLoader.ts`) that need to be injected into the expanded loader chain. It would be very complicated if the end users have to configure this themselves, so `VueLoaderPlugin` also injects a global [Pitching Loader](https://webpack.js.org/api/loaders/#pitching-loader) (`src/pitcher.ts`) that intercepts Vue `<template>` and `<style>` requests and injects the necessary loaders. The final requests look like the following:\n\n    ``` js\n    // <template lang=\"pug\">\n    import 'vue-loader/template-loader!pug-loader!vue-loader!source.vue?vue&type=template'\n\n    // <style scoped lang=\"scss\">\n    import 'style-loader!css-loader!vue-loader/style-post-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'\n    ```\n","readmeFilename":"README.md"}