1、建立login.vue 的组件，如图：
2、在main.js中引入login.vue
注意：webpack无法打包 .vue的文件，需要安装相关的loader npm i vue-loader vue-template-compiler -D
import Vue from 'vue' //webpack无法打包 .vue的文件，需要安装相关的loader // npm i vue-loader vue-template-compiler -D import login from './js/login.vue' var vm = new Vue({ el: "#app", data: { msg: '123' }, render: c => c(login) })3、在webpack配置文件中添加第三方匹配规则
4、在webpack配置文件中 添加插件 VueLoaderPlugin
完整的webpack配置文件如下：
const path = require('path') const webpack = require('webpack') //导入在内存中生成html页面的插件 //作用：1自动在内存中根据指定页面生成一个内存的页面 //2、自动把打包好的bundle.js追加到页面中去 const htmlWebpackPlugin = require('html-webpack-plugin') const VueLoaderPlugin = require('vue-loader/lib/plugin') //这个配置文件，起始就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象 module.exports = { //手动指定入口和出口 entry: path.join(__dirname,'/src/main.js'),//入口，表示要用webpack打包哪个文件 output: {//输出文件相关配置 path: path.join(__dirname,'/dist'), //指定打包后的文件的输出目录 filename: 'bundle.js' }, devServer: { open: true, port: 8888, contentBase: 'src', hot: true }, plugins: [ //热部署模块 new webpack.HotModuleReplacementPlugin(), new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件 template: path.join(__dirname,'./src/index.html'), //指定模板页面，根据指定的路径生成内存中的页面 filename: 'index.html', //指定在内存中生成的页面的名称 }), new VueLoaderPlugin() ], module:{ //所有第三方模块加载器 rules:[ //所有第三方匹配规则 { test: /\.vue$/,use:'vue-loader' }, ] } } //当我们在控制台直接输入webpack命令执行的时候，webpack做了以下几步： //1、首先，webpack发现没有通过命令指定入口和出口 //2、webpack就会去项目的根目录中查找‘webpack.config.js’的配置文件 //3、解析该配置文件，得到导出的配置对象 //4、根据配置的入口和出口，打包构建
