01.Webpack基礎知識

🏆 人這一生本就短暫，所以不要浪費時間爲別人而活着，要活出自己的精彩

---

day01

學習基礎

• node基礎，npm的使用
• 掌握ES6語法

學習目標

• webpack常見配置
• webpack高級配置
• webpack優化策略
• ast抽象語法樹
• webpack中的Tapable
• 掌握webpack流程，手寫webpack
• 手寫webpack中常見的loader
• 手寫webpack中常見的plugin

webpack簡介

中文官網 https://webpack.docschina.org/
中文官方文檔 https://webpack.docschina.org/concepts/

Webpack可以理解爲一個靜態資源打包器，根據文件的入口，通過在內部構建依賴樹，將項目中關聯到的靜態資源打包輸出

WebPack4新特性

1. mode屬性
   webpack需要設置mode屬性，可以是 development 或 production。例如: webpack --mode development

webpack 針對開發模式提供的特性:

• 瀏覽器調試工具
• 註釋、開發階段的詳細錯誤日誌和提示
• 快速和優化的增量構建機制
• webpack 針對生產模式提供的特性:
• 開啓所有的優化代碼
• 更小的 bundle 大小
• 去除掉只在開發階段運行的代碼
• Scope hoisting 和 Tree-shaking

2. 插件和優化
   webpack4刪除了 CommonsChunkPlugin 插件,它使用內置API optimization.splitChunks 和optimization.runtimeChunk，這意味着 webpack 會默認爲你生成共享的代碼塊。
   其他插件的變化：

   • NoEmitOnErrorsPlugin 廢棄->使用optimization.noEmitOnErrors替代
   • ModuleConcatenationPlugin 廢棄>使用optimization.concatenateModules替代
   • NamedModulesPlugin 廢棄>使用optimization.namedModules替代
   • uglifyjs-webpack plugin升級到了v1.0版本

3. 開箱即用WebAssembly
   WebAssembly(wasm) 會帶來運行時性能的大幅度提升，由於在社區的熱度，webpack4對它做了開箱即用的支持。你可以直接對本地的wasm模塊進行 import 或者 export 操作，也可以通過編寫 loaders 來直接import C++、 C或者Rust。

4. 支持多種模塊類型
   共五種:

   • javascript/auto: 在webpack3裏，默認開啓對所有模塊系統的支持。包括CommonJS. AMD、ESM.
   • javascript/esm: 只支持ESM這種靜態模塊。
   • javascript/dynamic: 只支持CommonJS和AMD這種動態模塊。
   • json：只支持JSON數據，可以通過require和import來使用。
   • webassembly/experimental: 只支持wasm模塊，目前處於試驗階段。

5. 0CJS (0配置)
   0CJS 的含義是0配置，webpack4受Parcel打包工具啓發，儘可能的讓開發者運行項目的成本變低。爲了做到0配置，webpack4不再強制需要 webpack.config.js 作爲打包的入口配置文件了，它默認的入口爲 "./src/index.js' 和默認出口 './dist/main.js'，對小項目而言是福音，不過還是建議手動配置。

6. 新的插件系統
   webpack4對插件系統進行了不少修改,提供了針對插件和鉤子的新API。
   變化如下:

   • 所有的hook由hooks對象統-管理，它將所有的hook作爲可擴展的類屬性。
   • 當添加插件時，必須提供一個插件名稱。
   • 開發插件時，可以選擇 sync/callback/promise 作爲插件類型。
   • 可以通過this.hooks = { myHook: new SyncHook1…) }來註冊hook了.

使用WebPack4注意點

需要 nodeJS 版本 >= 8.9.4，因爲新版本使用了很多JS的信譽大，新版本的node做了優化

Webpack可以完成哪些事情

代碼轉換：ES6轉ES5、Less，Sass等轉CSS

文件優化：

代碼分割：

模塊合併：

自動刷新：代碼熱更新

代碼校驗：校驗代碼規範

自動發佈：通過手寫插件可以實現自動發佈

安裝Webpack

全局安裝容易造成版本不一致，所以選擇在項目中安裝

# -D 表示開發依賴，上線版本不需要
yarn add webpack webpack-cli -D

0基礎使用Webpack

• 新建文件夾(項目目錄)

• 進入目錄，執行 yarn init 初始化項目，生成 package.json 項目配置文件

• 安裝開發依賴 webpack。yarn add webpack webpack-cli -D，生成node_modules文件夾並下載依賴

• 在根目錄下新建 src 文件夾，在 src 下新建 index.js 並輸出一句話。console.log('I am webpack')

• 測試打包。npx webpack 這條命令可以使用項目中本店安裝的 webpack 進行打包，從而避免全局安裝 webpack造成的版本不一致問題。結果默認會在根目錄下生成 dist/main.js 文件。

  注：手動配置 webpack.config.js 之後會按照配置的入口和出口生成相應的文件

webpack.config.js 的編寫(node語法)

webpack-dev-server 工具監聽代碼的更新

webpack-dev-server是webpack官方提供的一個小型Express服務器，可以爲webpack打包生成的資源文件提供web服務。

本地安裝

npm i webpack-dev-server -S -D

配置腳本

在 package.json 中配置腳本，執行 webpack-dev-server 命令。webpack-dev-server 和webpack 命令用法相同的

"script":{
	"dev": "webpack-dev-server"
}

運行

執行 npm run dev ，項目開始編譯並且以本地服務器方式運行在8080端口(根目錄託管在8080首頁)

webpack-dev-server 參數配置

• –open 編譯完成自動打開瀏覽器
• –port 3030 自定義端口號，默認是8080
• –hot 熱加載，代碼局部更新時（樣式）無需刷新瀏覽器自動加載，實際上這時候生成了 補丁包，避免了重新打完整包 ，如下圖：
  
• –contentBase src/views 默認打開訪問的路徑

• 注意：webpack-dev-server 打包生成的文件並不是 dist/dist.js 。爲了提高效率，會在根目錄下生成 dist.js 我們在瀏覽器中直接訪問 localhost:8080/dist.js 就能夠直接看到打包好的js文件，但在項目文件中並看不到。所以我們在引用的時候可以直接引用根目錄下的 dist.js 文件。
  

在 webpack.config.js 中配置

一般不會直接在 package.json 直接配置 webpack-dev-server，而是選擇在webpack.config.js 中添加配置項

webpack.config.js

module.exports={
	devServer:{
		open: true, //自動打開瀏覽器
		port: 3030, //端口號
		hot: true, //熱更新（僅僅設置這裏是不夠的）
		contentBase: "src" //首頁默認路徑
	}
}

熱更新配置

1. devServer中配置 {hot:true}

devServer:{
	hot: true
}

2. 引入webpack

const webpack = require('webpack')

3. 插件配置

plugins:[{
    new webpack.HotModuleReplacementPlugin() //創建熱更新(替換)模塊對象，內置在webpack中，不需要單獨引入
}]