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