Vue-Loader 是一个开源的 NPM 包，它是 Vue.js 模板编译器的核心。Vue.js 模板编译器是将 Vue.js 模板转化成纯 JavaScript 渲染函数的核心组件，Vue.js 模板编译器可以是运行时模式或者是模板模式。
Vue-Loader 提供了一个独立的 Webpack Loader，它能够将 Vue.js 单文件组件（包含模板、脚本和样式）转换为 JavaScript 模块。
在本篇文章中，我们将会详细介绍 Vue-Loader 的使用方法，并附带实际的代码演示。
前置条件
在使用 Vue-Loader 之前，需要安装 Node.js 和 Webpack。
安装 Vue-Loader
使用 NPM 包管理器，可以通过以下命令安装 Vue-Loader：
npm install --save-dev vue-loader
安装成功后，你可以在 Webpack.js 中使用 Vue-Loader。
Vue-Loader 的使用
接下来，我们假设你已经创建了一个 Vue.js 单文件组件，这个组件包含模板、脚本和样式，接下来我们将会演示如何将这个组件通过 Vue-Loader 转换为 JavaScript 模块。
Webpack 的配置文件
首先我们需要依次安装 webpack、 webpack-cli 和 webpack-dev-server，我们使用如下命令安装：
npm install --save-dev webpack webpack-cli webpack-dev-server
接下来，我们需要创建 Webpack 的配置文件 webpack.config.js，文件内容如下：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- ---------
------- ------------
-
-
-
--在 webpack.config.js 中，我们指定了 Webpack 的入口和出口，并设置了模块，规定了 Vue-Loader 的使用。
Vue.js 单文件组件
在 src 目录下，我们创建了一个 App.vue 的文件，这个文件是一个 Vue.js 单文件组件，它包含模板、脚本和样式：
-- -------------------- ---- -------
----------
---------- -- ---- --------
-----------
--------
------ ------- -
----- ------
------ -
------ -
----- -------
--
-
--
---------
-------
--- -
------ ----
-
--------Webpack 的启动文件
在 src 目录下，我们创建了一个 main.js 的文件，这个文件是一个 Webpack 的启动文件，它将渲染 Vue.js 单文件组件：
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});启动 Webpack
我们使用如下命令，启动 Webpack：
npx webpack-dev-server --open
在浏览器中，打开 http://localhost:8080 ，就可以看到渲染出来的 Vue.js 单文件组件了。
小结
在本篇文章中，我们详细地介绍了 Vue-Loader 的使用方法，并附带了实际的代码演示。
Vue-Loader 提供了一个独立的 Webpack Loader，它能够将 Vue.js 单文件组件（包含模板、脚本和样式）转换为 JavaScript 模块，为我们的前端开发提供了方便和快捷的工作方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/164490