打包過(guò)的文件其實(shí)我們經(jīng)常在使用膊夹，比如我們經(jīng)常引入的jquery只需要引入一個(gè)文件卦碾。開發(fā)者不可能是把那么多代碼寫到一個(gè)文件中窒百，而是分模塊功能開發(fā)，再通過(guò)打包工具真友，打包到一個(gè)文件中
一般兼容性處理
谷歌Chrome瀏覽器內(nèi)核是V8引擎赡突，可以解析絕大多數(shù)的es6語(yǔ)法。不能夠保證用戶都是使用谷歌瀏覽器月而，很多老版本瀏覽器根本帶不起來(lái)，所以要考慮兼容問(wèn)題议纯。
這個(gè)網(wǎng)站可以進(jìn)行獲取與瀏覽器兼容的 JavaScript
但是我們可以通過(guò)Wabpack打包功能去轉(zhuǎn)換兼容性處理和模塊化處理父款，工程化開發(fā)
一、下載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當(dāng)前項(xiàng)目下安裝Wabpack
1.在當(dāng)前項(xiàng)目下初始化一個(gè)包的描述文件
npm init -y
2.下載webpack在 -D開發(fā)環(huán)境依賴中
npm install webpack@4 -D
npm install webpack-cli@3 -D
二、要打包的代碼都放在src文件夾并引入入口文件中
（1）在a.js文件定義并導(dǎo)出一個(gè)方法
export let add= function (num1,num2){
return num1+num2
}
（2）導(dǎo)入模塊的兩種方法：
①.直接在b.js導(dǎo)入a模塊
import a from './a.js'
let num1=100
let num2=200
console.log(a.add(num1,num2));
②在b.js中導(dǎo)入a模塊中的指定方法
后期a.js可能有很多方法憨攒，有些并不要世杀，所以用{}結(jié)構(gòu)出a模塊需要的方法
import {add} from './a.js'
let num1=100
let num2=200
console.log(add(num1,num2));
（3）所有參與打包的文件，都應(yīng)該在入口文件中引入
main.js是入口文件
所有參與打包的文件肝集，都應(yīng)該在入口文件中引入
import './js/b.js'
import './css/a.css'
導(dǎo)入home組件
import Home from './componets/Home.vue'
圖片資源
先把三張圖片導(dǎo)進(jìn)來(lái)
import i1 from './img/1.jpg'
import i2 from './img/2.jpg'
import i3 from './img/3.jpg'
再創(chuàng)建三個(gè)對(duì)象
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)
導(dǎo)入vue
注意在工程化的開發(fā)中瞻坝，引入的vue是不帶處理模板功能的，其實(shí)引入的是vue.runtime.esm.js,而不是完成的vue.js
三分之一的體積是處理模板解析的杏瞻，所有vue在工程化給去除了
所以必須要手動(dòng)調(diào)用render函數(shù)的方式處理創(chuàng)建虛擬DOM并展示到頁(yè)面中
import Vue from 'vue' //按住ctrl點(diǎn)vue會(huì)跳轉(zhuǎn)vue文件里的package.json
手動(dòng)去改一下vue包中package.json所刀，里的入口文件main.js和模塊為dise.vue.js
即可在頁(yè)面中使用當(dāng)前vue實(shí)例里的數(shù)據(jù)了
Vue.js文件中是帶解析模板的，而vue.runtime.esm.js是不帶解析模板的捞挥，所以要改一下
Vue.config.productionTip = false
引入ElementUI組件庫(kù)
import ElementUI from 'element-ui';
引入ElementUI樣式
import 'element-ui/lib/theme-chalk/index.css';
因?yàn)镋lementUI組件庫(kù)是一個(gè)插件浮创，插件必須要通過(guò)Vue.use(插件名稱)
Vue.use(ElementUI);
new Vue({
如果采用這種方式就不需要去改vue的配置文件了。
不修改配置文件就要用渲染函數(shù)去解析內(nèi)容
// render:function(h){
直接建立標(biāo)簽掛載到el指定的標(biāo)簽容器里
// return h('h1',this.name+'---'+this.age)
// },
render:(h)=>h(Home),
data(){
return{
name:'張三',
age:30
}
}
}).$mount('#app2')
三砌函、使用webpack打包js文件
在項(xiàng)目的根路徑里面新建一個(gè)webpack.config.js是webpack的配置文件
（1）這個(gè)文件里只能使用commonjs模塊化的規(guī)范
const path=require('path')
// path模塊是node.js的內(nèi)置模塊斩披，用于處理路徑
module.exports={
// 整個(gè)項(xiàng)目必須要指定一個(gè)打包的入口文件
entry:'./src/main.js',
// 出口最終文件打包后的文件輸出到什么地方去（必要要指定一個(gè)絕對(duì)路徑）
// 項(xiàng)目打包后輸出的目錄
output:{
// 需要用path模塊去做拼接Node.js path 模塊提供了一些用于處理文件路徑的小工具
filename:'app.js',//最終打包出去的文件名
//打包文件的輸出路徑
//path是內(nèi)置模塊，它有個(gè)方法是resolve用于路徑拼接胸嘴，
// __dirname全局變量返回的是當(dāng)前項(xiàng)目的絕對(duì)路徑
// “dist”是我們打包后文件保存的目錄雏掠，將來(lái)文件保存在當(dāng)前項(xiàng)目的dist目錄里斩祭，到時(shí)會(huì)自己建
path:path.resolve(__dirname,"dist")
},
// loader
// plugins
// 模式,采用何種方式打包：有兩種方式1：開發(fā)模式（development）,生產(chǎn)模式（production）
// 生產(chǎn)模式會(huì)對(duì)打包只有的代碼壓縮劣像，最終會(huì)把代碼以production模式打包
// 開發(fā)模式會(huì)保留完成的代碼和調(diào)試代碼
mode:'development'
}
（2）基本配置好了在終端輸入webpack運(yùn)行，使用生產(chǎn)模式：
1.png
（3）使用開發(fā)模式摧玫，明顯開發(fā)模式比生產(chǎn)模式大了很多耳奕。最終我們會(huì)使用生產(chǎn)模式進(jìn)行打包
2.png
（4）在dist文件夾下新建html頁(yè)面，引入app.js
打開頁(yè)面控制臺(tái)就可以看到剛才打包的js輸出的內(nèi)容了
<script src="./app.js"></script>
