webpack配置使用vue

引入

引入vue等JS文件时一般有三种方式，一种是直接粘贴源码，第二种是CMD引入，第三种就是使用npm安装

npm install vue --save

因为vue是运行时依赖，所以后缀应为–save

import vue from 'vue';
const app=new vue({
    el:'#app',
    data:{
        message:'hello vue'
    }
})

在JS中import form关键字引入vue，但是直接打包的话会报错，所以需要在webpack.config.js中进行相关配置

意思是在使用vue时候会从node_modules的vue/dist目录下找vue.esm.js文件

预解析

在webpack对vue打包时，会自动编译vue为JS代码


会自动将id=app的内容替换为vue中template中的内容

vue模块化实现方案

对于vue中template中的内容，可以写到另一个JS文件中，作为一个对象导出到vue所在的文件中作为组件，template直接写组件标签即可，但是这样也不方便，那么就可以用.vue格式的文件，在里面可以写模板和样式，但是这需要使用vue-loader进行处理才可以实现打包