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
<template>
	<div id="app">
		<div class="demo">
			{{message}}
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				message:"你好啊,李银河"
			}
		}
	}
</script>

<style scoped lang="less">
	.demo{
		color: pink;
		font-size: 40px;
	}
</style>

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 中，<style lang="less"> 会完成把它当作一个真实的 *.less 文件来加载，所以需要配置less-loader来处理这种.less文件
			{
				test:/\.less$/,
				use:[
					"style-loader",
					{
						loader:"css-loader",
						options:{
							importLoaders:2
						}
					},
					"postcss-loader",
					"less-loader",
				]
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: ["babel-loader"],
			},
			{
				test: /\.vue$/,
				use: "vue-loader"  // 处理.vue文件
			}
		],
	},
	plugins:[
		new VueLoaderPlugin(), // 官方文档：Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用
	]
}

7. 执行npm run build,打包成功，说明vue-loader生效。

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

1. 安装vue3.0+版本

npm i vue@3.1.21 -D

2. 编写一个简单的.vue单文件组件(同上)
3. 在入口文件index.js中导入App.vue并进行挂载
   vue3.0没有全局的Vue类，而是导出了一个creatApp的方法

import {creatApp} from 'vue';
import App from './App.vue';

// Vue3.0挂载APP组件方法
createApp(App).mount('#app');

// Vue2.0挂载APP组件方法
new Vue({
	render:h=>h(App)
}).$mount("#app")

4. 安装vue-loader和vue-template-compiler
   官方文档：你应该将 vue-loader 和 vue-template-compiler 一起安装——除非你是使用自行 fork 版本的 Vue 模板编译器的高阶用户
   官方文档：每个 vue 包的新版本发布时，一个相应版本的 vue-template-compiler 也会随之发布。编译器的版本必须和基本的 vue 包保持同步，这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次升级项目中的 vue 包时，也应该匹配升级 vue-template-compiler。

npm install vue-loader vue-template-compiler -D

5. 在webpack.config.js中配置(同上)

标签：vue,版本,App,09,loader,webpack,template,compiler
来源： https://www.cnblogs.com/gaokai/p/15971131.html