打包过的文件其实我们经常在使用，比如我们经常引入的jquery只需要引入一个文件。开发者不可能是把那么多代码写到一个文件中，而是分模块功能开发，再通过打包工具，打包到一个文件中
一般兼容性处理
谷歌Chrome浏览器内核是V8引擎，可以解析绝大多数的es6语法。不能够保证用户都是使用谷歌浏览器，很多老版本浏览器根本带不起来，所以要考虑兼容问题。
这个网站可以进行获取与浏览器兼容的 JavaScript
但是我们可以通过Wabpack打包功能去转换兼容性处理和模块化处理，工程化开发
一、下载webpack
（1）在CMD中全局安装
1.使用webpack在本地全局安装webpack工具
npm install webpack@4 -g
npm install webpack-cli@3 -g
2.查看版本
webpack -v
3.卸载
npm remove webpack -g
（2）在vscode当前项目下安装Wabpack
1.在当前项目下初始化一个包的描述文件
npm init -y
2.下载webpack在 -D开发环境依赖中
npm install webpack@4 -D
npm install webpack-cli@3 -D
二、要打包的代码都放在src文件夹并引入入口文件中
（1）在a.js文件定义并导出一个方法
export let add= function (num1,num2){
return num1+num2
}
（2）导入模块的两种方法：
①.直接在b.js导入a模块
import a from './a.js'
let num1=100
let num2=200
console.log(a.add(num1,num2));
②在b.js中导入a模块中的指定方法
后期a.js可能有很多方法，有些并不要，所以用{}结构出a模块需要的方法
import {add} from './a.js'
let num1=100
let num2=200
console.log(add(num1,num2));
（3）所有参与打包的文件，都应该在入口文件中引入
main.js是入口文件
所有参与打包的文件，都应该在入口文件中引入
import './js/b.js'
import './css/a.css'
导入home组件
import Home from './componets/Home.vue'
图片资源
先把三张图片导进来
import i1 from './img/1.jpg'
import i2 from './img/2.jpg'
import i3 from './img/3.jpg'
再创建三个对象
let img1=document.createElement('img')
img1.src=i1
let img2=document.createElement('img')
img2.src=i2
let img3=document.createElement('img')
img3.src=i3
再获取app容器
let app=document.getElementById('app')
将三张图片添加到容器中
app.appendChild(img1)
app.appendChild(img2)
app.appendChild(img3)
导入vue
注意在工程化的开发中，引入的vue是不带处理模板功能的，其实引入的是vue.runtime.esm.js,而不是完成的vue.js
三分之一的体积是处理模板解析的，所有vue在工程化给去除了
所以必须要手动调用render函数的方式处理创建虚拟DOM并展示到页面中
import Vue from 'vue' //按住ctrl点vue会跳转vue文件里的package.json
手动去改一下vue包中package.json，里的入口文件main.js和模块为dise.vue.js
即可在页面中使用当前vue实例里的数据了
Vue.js文件中是带解析模板的，而vue.runtime.esm.js是不带解析模板的，所以要改一下
Vue.config.productionTip = false
引入ElementUI组件库
import ElementUI from 'element-ui';
引入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css';
因为ElementUI组件库是一个插件，插件必须要通过Vue.use(插件名称)
Vue.use(ElementUI);
new Vue({
如果采用这种方式就不需要去改vue的配置文件了。
不修改配置文件就要用渲染函数去解析内容
// render:function(h){
直接建立标签挂载到el指定的标签容器里
// return h('h1',this.name+'---'+this.age)
// },
render:(h)=>h(Home),
data(){
return{
name:'张三',
age:30
}
}
}).$mount('#app2')
三、使用webpack打包js文件
在项目的根路径里面新建一个webpack.config.js是webpack的配置文件
（1）这个文件里只能使用commonjs模块化的规范
const path=require('path')
// path模块是node.js的内置模块，用于处理路径
module.exports={
// 整个项目必须要指定一个打包的入口文件
entry:'./src/main.js',
// 出口最终文件打包后的文件输出到什么地方去（必要要指定一个绝对路径）
// 项目打包后输出的目录
output:{
// 需要用path模块去做拼接Node.js path 模块提供了一些用于处理文件路径的小工具
filename:'app.js',//最终打包出去的文件名
//打包文件的输出路径
//path是内置模块，它有个方法是resolve用于路径拼接，
// __dirname全局变量返回的是当前项目的绝对路径
// “dist”是我们打包后文件保存的目录，将来文件保存在当前项目的dist目录里，到时会自己建
path:path.resolve(__dirname,"dist")
},
// loader
// plugins
// 模式,采用何种方式打包：有两种方式1：开发模式（development）,生产模式（production）
// 生产模式会对打包只有的代码压缩，最终会把代码以production模式打包
// 开发模式会保留完成的代码和调试代码
mode:'development'
}
（2）基本配置好了在终端输入webpack运行，使用生产模式：
1.png
（3）使用开发模式，明显开发模式比生产模式大了很多。最终我们会使用生产模式进行打包
2.png
（4）在dist文件夹下新建html页面，引入app.js
打开页面控制台就可以看到刚才打包的js输出的内容了
<script src="./app.js"></script>
