{"dist":{"shasum":"e4544abf65cbb3b81f3d5360d95a3e2ae83749a1","tarball":"https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.0.tgz","fileCount":29,"integrity":"sha512-fTtCdI7VeyNK0HP4q4y9Z9ts8TUeaF+2/FjKx8CJ/7/Oem1rCX7zIJe+d+jLrVnVNQjENd3gqmANraLcdRWwnQ==","signatures":[{"sig":"MEQCIGH23ARCHEE9E/TMiTkRDRL1b5x/LdvL1VQFjsSJdVenAiA/cYbZ3nVSUa8At2csRRUZa9kNNRBCXzXOmsCgOr+uUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxFsuCRA9TVsSAnZWagAAATkP/ieWCml1ktyNytUwAoI/\nH3y5RxEfJS+7kizNm8lcAg9+SLoTXWUlD+5MzFJ+RZO5r/7WOmGjkkBrlvFZ\nxClaZ1wEmMXRi26wDEemHe8scN3e3ahgHCrxTDCSsbvYPkK9ndZ8gXRkM9a/\nfHpDyEC9NDejHLSPikwok8b0bDPrNcMaYrIDyo82uqUaYdoiPLn1VrjqGW5q\nrEasKwEPpA/eSl/KBRg7O1++PylhD7TLdErh0aVY9Af9B97E/eAg2ZXPkyHK\nQ0CpgOsFHhMHaMBhNkWh1c8p1gtJ7YzfV463JGNvjbg+hkPwXB+7o9q4nNgg\nryb7E2gyYgr10PZjk1pzlfwAsPRrqVszCdJxQaVP+GkJjgCnJrWhg7r9keJP\n1L6TZpDkJrqzIFOSo2ueawyMxnD406m3+OLTEMdTQSUrXVDAS5vW8eA3DMY0\nkSasocyFcoB5PBosMlxWksameNNrglBVrJwTOQkx9Mg6rHVVjfp7PugZxuj7\nDWYc+TARooqUt5F78d00LfI0KhFPaEYtIICykVDGt/usMaji53/tyqbEDz8D\nXzBAN7/bhg9ZSOoOYBNOob1ARFNqCKVZkHv/Zshs06hcoszopmY5smhKt4Cs\nTaRe5EFME1bvF8g9P952Z1MNkB01ge8t2XMIX9IBDWFN7RMeGntJpGT1VC0C\nEz+Z\r\n=pAH/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"vue-loader","types":"dist/index.d.ts","author":{"name":"Evan You"},"readme":"# vue-loader [![Build Status](https://circleci.com/gh/vuejs/vue-loader/tree/next.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/next) [![Windows Build status](https://ci.appveyor.com/api/projects/status/8cdonrkbg6m4k1tm/branch/next?svg=true)](https://ci.appveyor.com/project/yyx990803/vue-loader/branch/next)\n\n> webpack loader for Vue Single-File Components\n\n- [Documentation](https://vue-loader.vuejs.org)\n\n## What is Vue Loader?\n\n`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 `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/compiler-sfc`. 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, **after** `css-loader` but **before** `style-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!source.vue?vue&type=template'\n\n    // <style scoped lang=\"scss\">\n    import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'\n    ```\n","gitHead":"e7506098942de60fc4d35ab10b04d0927507618b","license":"MIT","scripts":{"dev":"tsc --watch","lint":"prettier --write --parser typescript \"{src,test}/**/*.{j,t}s\"","test":"jest --coverage","build":"tsc","pretest":"tsc","dev-example":"webpack-dev-server --config example/webpack.config.js --inline --hot","build-example":"rm -rf example/dist && webpack --config example/webpack.config.js --env.prod","test:webpack5":"WEBPACK5=true jest -c --coverage","prepublishOnly":"tsc","build-example-ssr":"rm -rf example/dist-ssr && webpack --config example/webpack.config.js --env.prod --env.ssr && node example/ssr.js"},"_npmUser":{"name":"soda","email":"haoqunjiang+npm@gmail.com"},"gitHooks":{"pre-commit":"lint-staged"},"_npmVersion":"6.14.8","description":"> webpack loader for Vue Single-File Components","directories":{},"lint-staged":{"*.js":["prettier --write"],"*.ts":["prettier --parser=typescript --write"]},"maintainers":[{"name":"yyx990803","email":"yyx990803@gmail.com"},{"name":"soda","email":"haoqunjiang+npm@gmail.com"}],"_nodeVersion":"12.19.0","dependencies":{"chalk":"^4.1.0","hash-sum":"^2.0.0","loader-utils":"^2.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"pug":"^2.0.0","vue":"^3.0.3","jest":"^26.4.1","jsdom":"^16.4.0","memfs":"^3.1.2","stylus":"^0.54.7","yorkie":"^2.0.0","sugarss":"^3.0.1","ts-jest":"^26.2.0","webpack":"^4.41.2","prettier":"^2.1.1","webpack5":"npm:webpack@5","ts-loader":"^8.0.6","css-loader":"^4.3.0","source-map":"^0.6.1","typescript":"^4.0.2","url-loader":"^4.1.0","@babel/core":"^7.7.7","@types/jest":"^26.0.13","file-loader":"^6.1.0","lint-staged":"^10.3.0","null-loader":"^4.0.1","webpack-cli":"^3.3.10","@types/jsdom":"^16.2.4","babel-loader":"^8.1.0","cache-loader":"^4.1.0","style-loader":"^2.0.0","@types/estree":"^0.0.45","stylus-loader":"^4.1.1","webpack-merge":"^5.1.4","@types/webpack":"^4.41.0","postcss-loader":"^4.0.4","@types/hash-sum":"^1.0.0","markdown-loader":"^6.0.0","pug-plain-loader":"^1.0.0","@babel/preset-env":"^7.11.5","@vue/compiler-sfc":"^3.0.3","normalize-newline":"^3.0.0","webpack-dev-server":"^3.9.0","@types/loader-utils":"^2.0.1","html-webpack-plugin":"^4.5.0","@types/webpack-merge":"^4.1.5","mini-css-extract-plugin":"^0.11.2","@types/mini-css-extract-plugin":"^0.9.1"},"_npmOperationalInternal":{"tmp":"tmp/vue-loader_16.1.0_1606703918135_0.20864012580135816","host":"s3://npm-registry-packages"},"_id":"vue-loader@16.1.0","version":"16.1.0"}