模块化和webpack模块化打包：
一、❀ 模块化 [导入import-----导出export]
1、为什么需要模块化？
JavaScript 发展初期，代码简单地堆积在一起，只要能顺利地从上往下一次执行即可。但随着网站越来越复杂，造成了很多问题：全局变量冲突、函数命名冲突、引入js文件顺序等等
二、webapck中配置Vue（安装vue依赖）和Vue组件化开发引入：
（1）webpack模块化vue（安装vue依赖）：
步骤一：通过npm安装Vue ： npm install vue --save
步骤二：在webpack.config.js中添加上 resolve（Vue runtime-compiler版本）
注意：去vue官网找安装命令和配置代码
（2）Vue组件化开发引入：
1） 需要安装：安装vue-loader、 vue-template-compiler和修改webpack.config.js的配置文件
2）Vue组件化开发引入的好处：
■ 对比cpn组件(js文件)和cpn组件（Vue文件），显然Vue文件的结构更加清晰
3）代码对比：
① js文件的Vue组件【可以看到模板template，属于html的，跟Vue（js）混在一起】：
//将模板以默认（匿名）对象的方式导出 export default{ template: ` <div> <button @click="btnClick">点w</button> <input type="text" /> <h1>{{message}}</h1> </div> `, data(){ return { message: '配置Vue啦~' } }, methods: { btnClick(){ console.log('感谢你点我哈~'); } } }
② Vue文件的Vue组件【html、css、js代码分离，结构清晰】：
<template> <div> <button class="btnColor" @click="btnClick">小儿子</button> <h5>{{message}}</h5> </div> </template> <script> export default { name: "cpn", data(){ return { message: '配置Vue啦~' } }, methods: { btnClick(){ console.log('感谢你点我哈~'); } } } </script> <style scoped> .btnColor{ background-color: greenyellow; } </style>
