webpack 中配置vue 组件的加载器

webpack 中配置vue 组件的加载器

	1、运行 npm i vue-loader vue-template-compiler -D 命令
	2、在 webpack.config.js 配置中，添加 vue-loader 配置项如下
	const VueLoaderPlugin = require('vue-loader/lib/plugin')
	module.exports = {
		module:{
			rules:[
				// ... 其他规则
				{test: /.vue$/,use:'vue-loader'}
			]
		},
		plugins:[
			// ... 其他插件
			new VueLoaderPlugin()  //请确保引入这个插件
		]
	}

2、在 webpack 项目中如何使用vue

	1、运行 npm i vue -s  安装 vue
	2、在src-->index.js 入口文件中，通过import Vue from 'vue' 导入vue构造函数
	3、创建 vue 的 示例对象，并指定要控制的el 区域
	4、通过render 函数渲染App 根组件
		//1、导入Vue 构造函数
		import Vue from 'vue'
		//2、导入App根组件
		import App from './components/App.vue'
		
		const vm = new Vue({
			//3、指定vm示例要控制的页面区域
			el:'#app'
			//4、通过render 函数，把指定的组件渲染到el区域中
			render: h => h(App)
		})

3、在 webpack 打包发布 （初体验）

上线之前需要通过webpack 将应用进行整体打包࿰