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 将应用进行整体打包，可以通过package.json 文件配置打包命令

	//在package.json文件中配置 webpack 打包命令
	//该密令默认加载项目根目录的webpack.config.js 配置文件
	"scripts":{
		// 用于打包的命令
		"build":"webpack -p",
		// 用于开发调试的命令
		"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000"
	}
	
	然后运行npm run build (运行之前可以把dist 文件删除 打包后会重新生成一个dist文件)
	// dist 是成品项目 把dist 给后台发布
	// dist / index.html  右键 可以看到页面