初識webpack

• 前端發展史

  • 早期階段

    早期前端只負責寫靜態頁面，純粹的展現功能，js也就是簡單的作一些表單的驗證，特效渲染等

  • 現階段的Web

    前端能夠管理數據以及和用戶互動。因爲用戶交互、數據交互的需求增多，也就出現了jQuery這樣的前端工具,再到目前的三大框架Vue、React、Angular，開發方式也衝原來的js的ES5語法到ES六、七、八、九、10，到Type Script，包括編寫CSS的預處理器less、scss等

• webpack究竟是幹什麼的

  衝上文的發展史知道現階段的Web開發涌現了許多新的開發方式，好比：ES5語法到ES六、七、八、九、10，到Type Script，包括編寫CSS的預處理器less、scss等，可是瀏覽器並不能識別less、sass、scss等語言，爲了兼容瀏覽器能識別開發者寫出的代碼就須要將瀏覽器不能識別的代碼轉換成瀏覽器可否識別的代碼，webpack做用就在此，因此 webpack就是一個打包工具，它會分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。這裏附上一個 webpack官網的圖片，從這張圖片能夠形象的說明 webpack的做用

• webpack官方文檔

  • 官方文檔：webpack.js.org/
  • 中文文檔：webpack.docschina.org/
  • 文檔目錄說明：
    • API:，提供相關的接口，能夠自定義編譯的過程（好比自定義loader和Plugin能夠參考該位置的API）
    • CONCEPTS:概念，主要是介紹一些webpack的核心概念，好比入口、出口、Loaders、Plugins等等，可是這裏並無一些對它們解析的詳細API；
    • CONFIGURATION:配置，webpack詳細的配置選項，均可以在這裏查詢到，更多的時候是做爲查詢手冊；
    • LOADERS:loaders，webpack的核心之一，常見的loader均可以在這裏查詢到用法，好比css-loader、babel-loader、less- loader等等；
    • PLUGINS:plugins，webpack的核心之一，常見的plugin均可以在這裏查詢到用法，好比BannerPlugin、 CleanWebpackPlugin、MiniCssExtractPlugin等等；

• webpack的依賴

  Webpack的運行是依賴Node環境的，因此咱們電腦上必須有Node環境

• webpack的安裝

  webpack的安裝須要安裝兩個東西，一個是webpack、還一個是 webpack-cli 二者之間的關係是：

  • 執行 webpack命令，會執行node_modules下的.bin目錄下的webpack
  • 可是若是沒有安裝webpack-cli執行webpack命令會報錯
  • webpack-cli中代碼執行時，纔是真正利用webpack進行編譯和打包的過程；

  (使用第三方腳手架生成的項目是沒有安裝webpack-cli的，他是利用相似本身的vue-service-cli的東西) webpack命令打包流程以下：

• webpack的默認打包

  默認狀況下 webpack打包是將 src文件夾下的 index.js文件做爲入口的，因此當前目錄沒有 src文件夾或者 src文件夾下面沒有一個 index.js文件的話會直接報錯。而後從入口開始，會生成一個依賴關係圖，這個依賴關係圖會包含應用程序中所需的全部模塊（好比.js文件、css文件、圖片、 字體等），而後遍歷圖結構，打包一個個模塊（根據文件的不一樣使用不一樣的loader來解析）； 打包成功後會默認在跟目下下生成一個 dist文件夾生成一個 main.js文件，此時將 main.js文件引入到 index.html後那些經過瀏覽器不能識別的語法書寫的代碼就能正常執行了好比寫一個簡單的減價法運算經過 commonJS的方案引入到 index.js示例代碼以下 運行結果：

  1. 沒有打包以前（直接引入index.js） 會報錯，應爲瀏覽器不識別 commonjs中的 require函數
  2. 打包以後（引入打包以後的js） 發現能正常運行。

  此時能夠看一下打包後生成的 main.js文件 發現文件中的代碼被壓縮醜化了，可是去除了 commonjs語法將全部的關聯文件中的代碼都堆在一個文件中，可是仍是存在一些 const關鍵字、箭頭函數等（這些都是 es6語法，如今比較新的瀏覽器支持這種語法，可是一些老大的瀏覽器仍是不支持），這裏能夠經過配置 webpack使用babel來進行轉換和設置。

  知識點補充：

  1. 若是直接在終端使用 webpack命令，此時使用的是全局的 webpack,若是沒有安裝全局的 webpack即便本地安裝了局部的 webpack也會報錯找不到命令
  2. 若是安裝了局部的 webpack想使用本地的 webpack打包此時應該使用的是 node_module文件夾下的 .bin文件夾下的 webpack進行打包，因此可使用使用 ./node_modules/.bin/webpack來調用本地的 webpack
  3. 除了上述方案使用本地 webpack以外還可使用 npx webpack命令來使用 npx會直接執行 node_modules下的某一個命令
  4. 能夠在 package.json添加一個腳本命令以下圖 此時就能夠直接使用 yarn build,該命令會找到 package.json裏面的 scripts裏面所建立的 build，而後就會執行裏面的命令，而 package.json中的命令會優先去找 node_modules裏面的命令，若是node_modules沒有對應的命令則會去找全局的

• webpack的配置文件

  在一般狀況下，webpack須要打包的項目是很是複雜的，而且咱們須要一系列的配置來知足要求，默認配置必然 是不能夠的。咱們能夠在根目錄下建立一個webpack.config.js文件，來做爲webpack的配置文件：默認 webpack回到根目錄下的 webpack.config.js文件中讀取配置，若是想更改文件名稱能夠經過 --config來修改默認的配置文件名稱以下圖: