Webpack5配置Vue3-SFC

#tag

Webpack5配置Vue3-SFC的笔记

配置

webpack需要解析.vue这种SFC文件，需要一些配置才可以做到。
当前使用的是Vue3，所以需要安装vue-loader@next

1
npm i vue-loader@next -D
1
2
3
4
5
6
7
8
9
//配置webpack的module.rules
module: {
	rules: [
		{
			test: /\.vue$/,
			use: "vue-loader",
		},
	],
}

使用webpack打包，出现错误
安装@vue/compiler-sfc

1
npm install @vue/compiler-sfc

再次打包，再次出现错误

修改webpack配置

1
2
3
4
5
const { VueLoaderPlugin } = require("vue-loader");

plugins:[
	new VueLoaderPlugin()
]

总结：

webpack中配置vue的sfc需要3个步骤。

  • 使用vue-loader
  • vue-loader依赖于@vue/compiler-sfc， 所以需要安装@vue/compiler-sfc
  • 使用VueLoaderPlugin插件
vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！