Webpack 3(12)VUE-LOADER構成の簡単な説明をハンドルで教えます

VUE-LOADER構成の概要

前注:

ドキュメントの全文は、ルートディレクトリのドキュメントの説明を参照してください.
よろしければ、本プロジェクトに「スター」と「Fork」を付けて引き続き注目してください.
疑義があればここをクリックして、「Issues」を送ってください.
DEMOアドレス

0、使用説明

まずVueを使わなければなりませんjs,さもないと本文の一部の内容が理解できない可能性がある
インストール:

npm install

実行:

//     （      ）
npm run dev

//     （           ）
npm run test

Vue-loaderを個別にインストールするには、次の手順に従います.

まずVueが必要です.

次にvueファイルを解析するにはvue-template-compilerが必要です.

cssの内容を解析するには、もちろんcss-loaderと、セットのstyle-loaderが必要です.

npm i --save vue
npm i --save vue-loader
npm i --save vue-template-compiler
npm i --save css-loader
npm i --save style-loader

以上のインストールにより、少なくとも使用を開始できます.

1、概要

簡単に言えば、vue-loaderは.vueファイルを処理するものです.
本明細書では、webpackにおけるvue−loaderの使用方法に加えて、.vueファイルのいくつかの独自の使用方法も含まれる.
しかし、vue-loader単独では問題を解決することはできません.そのため、他のものが必要です.
【1】vue-template-compiler:彼の役割について、readme.mdの文書に紹介されている:
This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. You will only need it if you are writing build tools with very specific needs. In most cases you should be using vue-loader or vueify instead, both of which use this package internally.
つまり、Vueのテンプレートファイル(.vueを指すべき)をレンダリング関数にプリコンパイルし、実行時の再コンパイルによるパフォーマンスオーバーヘッドを回避します.
つまり.vueファイルはjs実行時に解体され、使用すると多くの性能が消費されます.
一般的には、単独で彼を使う必要はありません.vue-loaderを使えばいいです(しかし、あなたは単独で彼をインストールする必要があります.vue-loaderをインストールするときはこれを持っていません).
【2】cssの内容を解析するには、もちろんcss-loader、およびセットのstyle-loaderが必要である.
あなたの必要に応じて、もっと必要かもしれませんが、一般的には、この2つを単独でインストールすればいいだけです(vue-laoderにはインストールは付いていません).

2、配置

2.1、デフォルトの構成

デフォルトの構成では、vue-loaderは基礎機能のみを備えています.
【1】.vue書類解体:

は、.vueファイルを利用可能な3つの部分に分解し、パッケージ化された.jsファイルに捨てる.

【2】HMR機能:

はHMR機能をデフォルトでサポートしている(DEMOには既にプリセットがあり、npm run devを実行して使用することができる).

ルールに興味がある場合は、公式サイトの説明を参照してください:ホットリロードvue-loader

【3】cssローカルドメイン:

サポートコンポーネントのcssは局所的な役割ドメインを使用し、styleラベルにscopedを追加すればよい.

例えば: