webpack基础(五)——vue文件打包

一、vue的不同构建版本

1、cjs版本（该版本都是完整版，都包含编译器）
vue.cjs.js
vue.cjs.prod.js   //开发版本,代码进行压缩的
2、global版本（可以在浏览器通过script标签引入，并且在全局设置一个全局变量vue）
vue.global.js
vue.global.prod.js
vue.runtime.global.js
vue.runtime.global.prod.js
3、browser（四种版本都包含esm，浏览器的原生模块化开发，直接使用<script type="module"></script>）
vue.esm-browser.js
vue.esm-browser.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js
4、bunder(这两个版本没有打包所有代码只是打包所有使用过的代码，需要配合打包工具来使用,使得打包后的文件变小)
vue.esm-bundler.js
bue.runtime.esm-bundler.js

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

二、运行时+编译器 vs 仅运行时
运行时+编译器中包含对template代码解析的模块，仅运行时不包含。

import {
  createApp
} from "vue/dist/-bundler"

const app = createApp({
  template: "<h1>大家好，我是dl</h1>"
})
app.mount("#app")

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

打包后的结果

但是目前我们应该打包的是单页面(.vue)文件，而不是在js代码从入口引入打包。此时我们需要安装vue-loader，执行命令npm install vue-loader -D。
然后在中配置文件为。

{
	test:/\.vue$/,
	loader:"vue-loader"
}

• 1
• 2
• 3
• 4

执行代码后，仍然出现错误。

因为我们还需要使用@vue/compiler-sfc,该插件的作用是对template的解析。
除此之外我们还需要引入vue-loader中的VueLoaderPlugin来重新打包vue文件。

const {
  VueLoaderPlugin
} = require("vue-loader/dist/index")
module.exports = {
	modules:{
		rules:[
			{
				test:/\.js$/,
				loader:"vue-loader"
			}
		]		
	},
	plugins:[
		new VueLoaderPlugin(),
	]
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

//入口文件
import { createApp } from 'vue'
import App from "./vue/"

const app = createApp(App)

app.mount("#app")

• 1
• 2
• 3
• 4
• 5
• 6
• 7

//文件。
<template>
  <h1>大家好，window{{ name }}</h1>
</template>

<script>
export default {
  data() {
    return {
      name: "ddd",
    };
  },
};
</script>

<style>
h1 {
  color: red;
}
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

最终显示结果为: