(掌握)webpack对vue文件的处理打包

(掌握)webpack对vue文件的处理打包

编写App.vue代码

• 在开发中我们会编写Vue相关的代码，webpack可以对Vue代码进行解析：
  • 接下来我们编写自己的App.vue代码

App.vue的打包过程

• 我们对代码打包会报错：我们需要合适的Loader来处理文件

• 这个时候我们需要使用vue-loader：

npm install vue-loader -D

• 在webpack的模板规则中进行配置：

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

@vue/compiler-sfc

• 打包依然会报错，这是因为我们必须添加@vue/compiler-sfc来对template进行解析：

npm install @vue/compiler-sfc -D

• 另外我们需要配置对应的Vue插件：

const {VueLoaderPlugin} = require('vue-loader/dist/index')
new VueLoaderPlugin()

• 重新打包即可支持App.vue的写法
• 另外，我们也可以编写其他的.vue文件来编写自己的组件