摘要：第節認識的作用學習的一原因現在的前端網頁功能豐富，特別是單頁應用技術流行后，的復雜度增加和需要一大堆依賴包，還需要解決，新增樣式的擴展寫法的編譯工作。在出現后，還肩負起了優化項目的責任。其實就是獲取了項目的絕對路徑。

學習的一原因：

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

現在最流行的三個前端框架，可以說和webpack已經緊密相連，框架官方都推出了和自身框架依賴的webpack構建工具。

React.js+WebPack
Vue.js+WebPack
AngluarJS+WebPack
從此可以看出，無論你前端走那條線，你都要有很強的Webpack知識，才能祝你成為這個框架領域的大牛。

2.對webpack的理解：

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現后，Webpack還肩負起了優化項目的責任。

這段話有三個重點：

打包：可以把多個Javascript文件打包成一個文件，減少服務器壓力和下載帶寬。
轉換：把拓展語言轉換成為普通的JavaScript，讓瀏覽器順利運行。
優化：前端變的越來越復雜后，性能也會遇到問題，而WebPack也開始肩負起了優化和提升性能的責任。
我們可以從下圖再次了解一下WebPack的作用:

引用文字
如果webpack是最新版本（目前是：4.7.0），在執行webpack命令時，經常會出現提示安裝webpack-cli，個人由于偷懶一點，在網上找了一些方法，由于才剛入門還不太理解，就退回3.6.0版本了。方法：先在package-json文件中把之前版本號改成需要的版本號（我的是4.7.0—>3.6.0,如圖所示：
）
接著刪除了node_modules文件，最后在終端輸入命令：cnpm install webpack@3.6.0 -g
，在終端輸入webpack -v出現版本號，結果如下即可：

建立基本項目結構

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

src文件夾：用來存放我們編寫的javascript代碼，可以簡單的理解為用JavaScript編寫的模塊。
dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。

你可以理解成src是源碼文件，dist是我們編譯打包好的文件；一個用于開發環境，一個用于生產環境。

編寫程序文件：
文件夾建立好后，我們在dist文件下手動建立一個index.html文件，并寫入下面的代碼。
（代碼略）

2.第一次Webpack打包

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

配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件，這個文件需要自己在項目根目錄下手動建立。建立好后我們對其進行配置，先看下面的代碼（webpack.config.js的基本結構），這是一個沒有內容的標準webpack配置模版。

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

1.entry選項（入口配置）

這個選項就是配置我們要壓縮的文件一般是JavaScript文件（當然也可以是CSS…..）。這里要填寫的是src目錄下的entery.js文件。

//入口文件的配置項
entry:{

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

},

2.output選項（出口配置）

出口配置是用來告訴webpack最后打包文件的地址和文件名稱的。按照上節課的操作，應該打包到dist目錄下。在編寫出口文件時，我們需要用到一點Node的知識，如果你還不會Node也沒有 關系，就簡單的兩句代碼，你記住就可以了（老師如是說）。

//出口文件的配置項
output:{

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

},

列表如果你只這樣寫，是會報錯的：找不到path這個東西。所以我們要在webpack.config.js的頭部引入path，代碼如下：

const path = require("path");

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

（其實path.resolve(__dirname,’dist’)就是獲取了項目的絕對路徑。）

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

3.現在是webpack.config.js的完整代碼：

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

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

}
4.這個代碼寫完后，可以在終端中直接輸入webpack就會進行打包。

在實際開發中我們都是通過配置文件進行打包的，所以必須要掌握好。

5.多入口、多出口配置

Webpack在版本1的時候很難設置多出口文件，但是在2版本開始就變的很方便了。直接看多入口和多出口的文件配置，然后可以和單一出口對比一下，你會發現這種設置非常簡單（只需改動兩點配置就可以）。
const path = require("path");
module.exports={

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

}

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