webpack (十) -打包vue文件-需要配置Vue Loader加载器，在vue官网查询，而不是webpack官网

18-webpack-打包vue文件

vue-loader不是webpack提供的，而是vue本身提供的：

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件：

• https://vue-loader.vuejs.org/zh/#vue-loader-是什么？

手动配置vue-loader：

• https://vue-loader.vuejs.org/zh/guide/#vue-cli

第一步：命令行中 安装vue包

npm i vue

• 在入口文件index.vue中进行导入

  import Vue from ‘vue’

第二步：新建src/APP.vue文件 1

第三步：vue组件文件 在 入口文件index.vue中 进行引入 2

第四步：命令行 安装包

vue-loader：加载vue文件内容 vue-template-compiler：编译成组件配置对象

npm install -D vue-loader vue-template-compiler

第五步：webpack.config.js中进行加载器配置

// 加载vue文件
+  const VueLoaderPlugin = require('vue-loader/lib/plugin')

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

第六步：npm run serve 后，页面显示正常，说明 vue-loader 加载器配置成功

第七步：把vue组件 挂载到 html网页上 3

第八步：在入口文件index.js中 创建vue实例 4

第九步：命令行运行npm run serve启动服务器后，打开页面，验证vue组件文件在页面是否渲染成功 5