vue3+ts学习（十三）：用webpack打包vue文件

首先要下载vue，然后在main.js导入

npm install vue@next

// main.js
import { createApp } from "vue";
import App from "./App.vue"

const app = createApp(App)
app.mount("#app")  // 在index.html模板中有id为app的标签 

加载vue文件需要对应vue-loader，使用vue-loader，需要调用其内部插件VueLoaderPlugin，以及依赖的外部插件vue/compiler-sfc进行解析编译

npm install vue-loader -D

npm install @vue/compiler-sfc -D

// vue-loader需要导入一个插件才能解析vue文件 
const { VueLoaderPlugin } = require('vue-loader/dist/index') 

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

App.vue中可以正常编写vue代码，并在打包的时候解析出来了

// App.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello2!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

控制台出现以下警告的处理方案，新增两个配置变量解决

new DefinePlugin(
    { 
      __VUE_OPTIONS_API__:true,   //是否开启对vue2适配 tree-shaking 摇树 把没用到的代码删除 ，默认true
      __VUE_PROD_DEVTOOLS__:false //生产是否支持dev库（vue调试工具） 一般只在开发阶段使用,默认false
    }
),