摘要：第節(jié)認(rèn)識(shí)的作用學(xué)習(xí)的一原因現(xiàn)在的前端網(wǎng)頁(yè)功能豐富，特別是單頁(yè)應(yīng)用技術(shù)流行后，的復(fù)雜度增加和需要一大堆依賴包，還需要解決，新增樣式的擴(kuò)展寫(xiě)法的編譯工作。在出現(xiàn)后，還肩負(fù)起了優(yōu)化項(xiàng)目的責(zé)任。其實(shí)就是獲取了項(xiàng)目的絕對(duì)路徑。

學(xué)習(xí)的一原因：

現(xiàn)在的前端網(wǎng)頁(yè)功能豐富，特別是SPA（single page web application 單頁(yè)應(yīng)用）技術(shù)流行后，JavaScript的復(fù)雜度增加和需要一大堆依賴包，還需要解決SCSS，Less……新增樣式的擴(kuò)展寫(xiě)法的編譯工作。所以現(xiàn)代化的前端已經(jīng)完全依賴于WebPack的輔助了。

現(xiàn)在最流行的三個(gè)前端框架，可以說(shuō)和webpack已經(jīng)緊密相連，框架官方都推出了和自身框架依賴的webpack構(gòu)建工具。

React.js+WebPack
Vue.js+WebPack
AngluarJS+WebPack
從此可以看出，無(wú)論你前端走那條線，你都要有很強(qiáng)的Webpack知識(shí)，才能祝你成為這個(gè)框架領(lǐng)域的大牛。

2.對(duì)webpack的理解：

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Sass，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。在3.0出現(xiàn)后，Webpack還肩負(fù)起了優(yōu)化項(xiàng)目的責(zé)任。

這段話有三個(gè)重點(diǎn)：

打包：可以把多個(gè)Javascript文件打包成一個(gè)文件，減少服務(wù)器壓力和下載帶寬。
轉(zhuǎn)換：把拓展語(yǔ)言轉(zhuǎn)換成為普通的JavaScript，讓瀏覽器順利運(yùn)行。
優(yōu)化：前端變的越來(lái)越復(fù)雜后，性能也會(huì)遇到問(wèn)題，而WebPack也開(kāi)始肩負(fù)起了優(yōu)化和提升性能的責(zé)任。
我們可以從下圖再次了解一下WebPack的作用:

引用文字
如果webpack是最新版本（目前是：4.7.0），在執(zhí)行webpack命令時(shí)，經(jīng)常會(huì)出現(xiàn)提示安裝webpack-cli，個(gè)人由于偷懶一點(diǎn)，在網(wǎng)上找了一些方法，由于才剛?cè)腴T(mén)還不太理解，就退回3.6.0版本了。方法：先在package-json文件中把之前版本號(hào)改成需要的版本號(hào)（我的是4.7.0—>3.6.0,如圖所示：
）
接著刪除了node_modules文件，最后在終端輸入命令：cnpm install [email protected] -g
，在終端輸入webpack -v出現(xiàn)版本號(hào)，結(jié)果如下即可：

建立基本項(xiàng)目結(jié)構(gòu)

首先建立webpack_demo文件（每個(gè)人建立的位置不同，可能建立在了D盤(pán)或者E盤(pán)）。在該文件的根目錄下建立兩個(gè)文件夾，分別是src文件夾和dist文件夾：

src文件夾：用來(lái)存放我們編寫(xiě)的javascript代碼，可以簡(jiǎn)單的理解為用JavaScript編寫(xiě)的模塊。
dist文件夾：用來(lái)存放供瀏覽器讀取的文件，這個(gè)是webpack打包成的文件。

你可以理解成src是源碼文件，dist是我們編譯打包好的文件；一個(gè)用于開(kāi)發(fā)環(huán)境，一個(gè)用于生產(chǎn)環(huán)境。

編寫(xiě)程序文件：
文件夾建立好后，我們?cè)赿ist文件下手動(dòng)建立一個(gè)index.html文件，并寫(xiě)入下面的代碼。
（代碼略）

2.第一次Webpack打包

Webpack其實(shí)是可以在終端（命令行）中使用的，基本使用方法如下：
webpack {entry file} {destination for bundled file}
{entery file}:入口文件的路徑，本文中就是src/entery.js的路徑；
{destination for bundled file}:填寫(xiě)打包后存放的路徑。
注意：在命令行中是不需要寫(xiě){ }的。

配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件，這個(gè)文件需要自己在項(xiàng)目根目錄下手動(dòng)建立。建立好后我們對(duì)其進(jìn)行配置，先看下面的代碼（webpack.config.js的基本結(jié)構(gòu)），這是一個(gè)沒(méi)有內(nèi)容的標(biāo)準(zhǔn)webpack配置模版。

entry：配置入口文件的地址，可以是單一入口，也可以是多入口。
output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
module：配置模塊，主要是解析CSS和圖片轉(zhuǎn)換壓縮等功能。
plugins：配置插件，根據(jù)你的需要配置不同功能的插件。
devServer：配置開(kāi)發(fā)服務(wù)功能，后期我們會(huì)詳細(xì)講解。

1.entry選項(xiàng)（入口配置）

這個(gè)選項(xiàng)就是配置我們要壓縮的文件一般是JavaScript文件（當(dāng)然也可以是CSS…..）。這里要填寫(xiě)的是src目錄下的entery.js文件。

//入口文件的配置項(xiàng)
entry:{

//里面的entery是可以隨便寫(xiě)的
entry:"./src/entry.js"

},

2.output選項(xiàng)（出口配置）

出口配置是用來(lái)告訴webpack最后打包文件的地址和文件名稱的。按照上節(jié)課的操作，應(yīng)該打包到dist目錄下。在編寫(xiě)出口文件時(shí)，我們需要用到一點(diǎn)Node的知識(shí)，如果你還不會(huì)Node也沒(méi)有 關(guān)系，就簡(jiǎn)單的兩句代碼，你記住就可以了（老師如是說(shuō)）。

//出口文件的配置項(xiàng)
output:{

//打包的路徑文職
path:path.resolve(__dirname,"dist"),
//打包的文件名稱
filename:"bundle.js"

},

列表如果你只這樣寫(xiě)，是會(huì)報(bào)錯(cuò)的：找不到path這個(gè)東西。所以我們要在webpack.config.js的頭部引入path，代碼如下：

const path = require("path");

這里我們使用了const，這是ES6的語(yǔ)法，如果你對(duì)ES6還不熟悉，也可以看技術(shù)胖ES6的課程哦（http://jspang.com/2017/06/03/...）。

（其實(shí)path.resolve(__dirname,’dist’)就是獲取了項(xiàng)目的絕對(duì)路徑。）

（filename:是打包后的文件名稱，這里我們起名為bundle.js。）

3.現(xiàn)在是webpack.config.js的完整代碼：

const path = require("path");
module.exports={

//入口文件的配置項(xiàng)
entry:{
    entry:"./src/entry.js"
},
//出口文件的配置項(xiàng)
output:{
    //輸出的路徑，用了Node語(yǔ)法
    path:path.resolve(__dirname,"dist"),
    //輸出的文件名稱
    filename:"bundle.js"
},
//模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮
module:{},
//插件，用于生產(chǎn)模版和各項(xiàng)功能
plugins:[],
//配置webpack開(kāi)發(fā)服務(wù)功能
devServer:{}

}
4.這個(gè)代碼寫(xiě)完后，可以在終端中直接輸入webpack就會(huì)進(jìn)行打包。

在實(shí)際開(kāi)發(fā)中我們都是通過(guò)配置文件進(jìn)行打包的，所以必須要掌握好。

5.多入口、多出口配置

Webpack在版本1的時(shí)候很難設(shè)置多出口文件，但是在2版本開(kāi)始就變的很方便了。直接看多入口和多出口的文件配置，然后可以和單一出口對(duì)比一下，你會(huì)發(fā)現(xiàn)這種設(shè)置非常簡(jiǎn)單（只需改動(dòng)兩點(diǎn)配置就可以）。
const path = require("path");
module.exports={

//入口文件的配置項(xiàng)
entry:{
    entry:"./src/entry.js",
    //這里我們又引入了一個(gè)入口文件
    entry2:"./src/entry2.js"
},
//出口文件的配置項(xiàng)
output:{
    //輸出的路徑，用了Node語(yǔ)法
    path:path.resolve(__dirname,"dist"),
    //輸出的文件名稱
    filename:"[name].js"
},
//模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮
module:{},
//插件，用于生產(chǎn)模版和各項(xiàng)功能
plugins:[],
//配置webpack開(kāi)發(fā)服務(wù)功能
devServer:{}

}

[name]的意思是根據(jù)入口文件的名稱，打包成相同的名稱，有幾個(gè)入口文件，就可以打包出幾個(gè)文件。