在webpack使用render渲染vue组件

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、根据配置的入口和出口，打包构建