VUE3之WebPack打包.vue文件

打包.vue文件

webpack打包.vue文件，不仅需要vue-loader，还需要complier为template进行解析。此外还需要用到插件。

安装vue-loader和compiler

npm install vue-loader@next -D
npm install @vue/compiler-sfc -D

在webpack.config.js中导入插件

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

使用loader和plugin

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ]

main.js的一点改动：

// import { createApp } from 'vue/dist/vue.esm-bundler';
// template已经交给.vue文件，并由vue/compiler-sfc处理，所以这里只需要用runtime的包
import { createApp } from 'vue';