09.webpack处理.vue文件

使用vue-loader@15版本来处理.vue文件

首先要说明一点，vue-loader的不同版本在处理.vue文件的时候其配置是不同的，所以要分开来处理。
下面是使用webpack来打包一个.vue单文件组件的配置：

1. 安装vue2.+版本

npm i vue@2.6.12 -D

2. 编写一个简单的.vue单文件组件

// App.vue

3. 在入口文件index.js中导入App.vue并进行挂载

import Vue from 'vue';
import App from './App.vue';

new Vue({
	render:h=>h(App)
}).$mount("#app")

4. 安装vue-loader15版本

npm i vue-loader@15.8.9 -D

5. 安装编译template的包vue-template-compiler，版本必须和vue版本保持一致

npm i vue-template-compiler@2.6.12 -D

6. 在webpack.config.js中配置

const {
	VueLoaderPlugin
} = require('vue-loader');

module.exports = {
	module: {
		rules: [
			// 官方文档：在 v15 中，