webpack的學習之路~~第一天

第01節：認識WebPack的做用：

1. 學習的一緣由：

如今的前端網頁功能豐富，特別是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的做用:

---

第02節：讓你快速上手一個Demo

引用文字
若是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出現版本號，結果以下便可：

1. 創建基本項目結構

首先創建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}:填寫打包後存放的路徑。
注意：在命令行中是不須要寫{ }的。

---

第03節：配置文件：入口和出口

配置文件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]的意思是根據入口文件的名稱，打包成相同的名稱，有幾個入口文件，就能夠打包出幾個文件。