Vue-loader 是 Webpack 的加载器模块，它使我们可以用 .vue 文件格式编写单文件组件。单文件组件文件有三个部分，即模板、脚本和样式。 vue-loader 模块允许 webpack 使用单独的加载器模块（例如 SASS 或 SCSS 加载器）提取和处理每个部分。该设置使我们可以使用 .vue 文件无缝编写程序。

vue-loader 模块还允许把静态资源视为模块依赖性，并允许使用 webpack 加载器进行处理。而且还允许在开发过程中进行热重装。

webpack 配置

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：

// webpack.config.jsconst { VueLoaderPlugin } = require('vue-loader')module.exports = {  module: {    rules: [      // ... 其它规则      {        test: /\.vue$/,        loader: 'vue-loader'      }    ]  },  plugins: [    // 请确保引入这个插件！    new VueLoaderPlugin()  ]}

这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。

一个更完整的 webpack 配置示例看起来像这样：

// webpack.config.jsconst { VueLoaderPlugin } = require('vue-loader')module.exports = {  mode: 'development',  module: {    rules: [      {        test: /\.vue$/,        loader: 'vue-loader'      },      // 它会应用到普通的 `.js` 文件      // 以及 `.vue` 文件中的 `<script>` 块      {        test: /\.js$/,        loader: 'babel-loader'      },      // 它会应用到普通的 `.css` 文件      // 以及 `.vue` 文件中的 `<style>` 块      {        test: /\.css$/,        use: [          'vue-style-loader',          'css-loader'        ]      }    ]  },  plugins: [    // 请确保引入这个插件来施展魔法    new VueLoaderPlugin()  ]}