webpack 知識點梳理

時間 2019-11-17

標籤 webpack 知識梳理简体版

原文原文鏈接

點錯了直接發佈了千萬別說沒寫完後續會更新的javascript

webpack 基本文檔梳理

概念

webpack ：一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)css

入口(entry): webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的
輸出(output): 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件
loader: 用於對模塊的源代碼進行轉換，讓 webpack 可以去處理那些非 JavaScript 文件
插件(plugins): 用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量
模式(mode): 開發環境仍是生產環境
模塊解析(resolver): 幫助找到弄快的絕對路徑。
構建目標(targets): node環境仍是瀏覽器環境
模塊熱替換(HMR): 在應用程序運行過程當中替換、添加或刪除模塊，而無需從新加載整個頁面

多種配置類型

導出一個函數：運用在開發和生產構建區別之間,用webpack-merge 合併
導出一個 Promise ：須要異步地加載所需的配置變量，例如：動態加載文件路徑等
導出多個配置對象: 例如node環境和 web環境分開配置

webpack的基本功能和工做原理

代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等等
文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片等
代碼分割：提取多個頁面的公共代碼、提取首屏不須要執行部分的代碼讓其異步加載
模塊合併：在採用模塊化的項目有不少模塊和文件，須要構建功能把模塊分類合併成一個文件
自動刷新：監聽本地源代碼的變化，自動構建，刷新瀏覽器
代碼校驗：在代碼被提交到倉庫前須要檢測代碼是否符合規範，以及單元測試是否經過
自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。

webpack構建過程

從entry裏配置的module開始遞歸解析entry依賴的全部module
每找到一個module，就會根據配置的loader去找對應的轉換規則
對module進行轉換後，再解析出當前module依賴的module
這些模塊會以entry爲單位分組，一個entry和其全部依賴的module被分到一個組Chunk
最後webpack會把全部Chunk轉換成文件輸出
在整個流程中webpack會在恰當的時機執行plugin裏定義的邏輯

webpack

webpack-bundle-analyzer webpack打包後 bundle大小分析
webpack-merge 用於合併webpack的公共配置和環境配置(合併webpack.config.js和webpack.development.js或者webpack.production.js)
ProgressBarWebpackPlugin 打包編譯的時候以進度條的形式反饋打包進度

經常使用loader

url-loader 可將文件轉換爲base64 URIs
file-loader 將文件發送到輸出文件夾，並返回（相對）URL
ts-loader 或 awesome-typescript-loader 像 JavaScript 同樣加載 TypeScript 2.0+
babel-loader 加載 ES2015+ 代碼，而後使用 Babel 轉譯爲 ES5
html-loader 導出 HTML 爲字符串，須要引用靜態資源
xml-loader 加載XML文件
markdown-loader 使用markmark的webpack的markdown-loader
style-loader 將模塊的導出做爲樣式添加到 DOM 中
css-loader 解析 CSS 文件後，使用 import 加載，而且返回 CSS 代碼
less-loader 加載和轉譯 LESS 文件
sass-loader 加載和轉譯 SASS/SCSS 文件
postcss-loader 使用 PostCSS 加載和轉譯 CSS/SSS 文件
stylus-loader 加載和轉譯 Stylus 文件
eslint-loader PreLoader，使用 ESLint 清理代碼
mocha-loader 使用 mocha 測試（瀏覽器/NodeJS）
postcss-safe-parser PostCSS的容錯CSS解析器，它將查找並修復語法錯誤，可以解析任何輸入

經常使用 plugins (npm 官網能夠本身找鏈接這裏之後再把鏈接加上)

ExtractTextWebpackPlugin 從 bundle 中提取文本（CSS）到單獨的文件
HtmlWebpackPlugin 簡單建立 HTML 文件，用於服務器訪問
CleanWebpackPlugin用於清除本地文件，在進行生產環境打包的時候，若是不清除dist文件夾，那麼每次打包都會生成不一樣的js文件或者css文件堆積在文件夾中，由於每次打包都會生成不一樣的hash值致使每次打包生成的文件名與上次打包不同不會覆蓋上次打包留下來的文件
MiniCssExtractPlugin webpack打包樣式文件中的默認會把樣式文件代碼打包到bundle.js中，MiniCssExtractPlugin這個插件能夠將樣式文件從bundle.js抽離出來一個文件，而且支持chunk css
UglifyjsWebpackPlugin 能夠控制項目中 UglifyJS 的版本
OptimizeCssAssetsWebpackPlugin css壓縮，主要使用 cssnano 壓縮器(webpack4的執行環境內置了cssnano，因此不用安裝)
SplitChunksPlugin CommonChunkPlugin 的後世，用於對bundle.js進行chunk切割(webpack的內置插件)
DllPlugin 爲了極大減小構建時間，進行分離打包
DllReferencePlugin 將預先編譯好的模塊關聯到當前編譯中，當 webpack 解析到這些模塊時，會直接使用預先編譯好的模塊(webpack的內置插件)
DefinePlugin 容許在編譯時(compile time)配置的全局常量
HotModuleReplacementPlugin 啓用模塊熱替換(Enable Hot Module Replacement - HMR)
HardSourceWebpackPlugin 爲模塊提供中間緩存步驟，加快後續構建速度
babel-plugin-import-fix 縮小引用範圍

babel

babel-core babel核心編譯包
babel-loader 使用Babel和webpack轉換JavaScript文件
babel-plugin-import 用於babel的模塊化導入插件按需加載,例如antd、lodash
@babel/plugin-proposal-decorators decorators編譯
babel-plugin-transform-export-extensions es6導出語法
babel-plugin-transform-react-jsx 將JSX變成React函數調用
babel-plugin-transform-runtime 提供es6代碼運行環境，常在第三方運行類庫中使用
@babel/polyfill es6運行環境，常在項目中使用
babel-plugin-ramda ramda 的 tree-shaking
babel-plugin-lodash tree-shaking代碼
babel-plugin-react-docgen-typescript ts文檔自動提示

其餘經常使用 node package

點擊進入查看綜合應用html

chalk 給命令行中的文字添加樣式
commander 編寫node命令行,cli必備
cross-spawn nodejs spawn 的跨平臺的版本。主要用來建立子進程執行一些命令
fs-extra 提供對文件操做的方法
current-git-branch 獲取當前分支名稱
validate-commit-msg 驗證git commit規範

react 經常使用項目依賴 package

antd ui組件庫
classnames 動態合併 className
clipboard 複製粘貼
dva 阿里出品，基於 redux 和 redux-saga 的數據流方案
dva-loading 自動加載dva的數據綁定插件,不用再寫showLoading and hideLoading
dva-model-extend 擴展dva模型的實用方法,相似對象合併
immutable Immutable Data 就是一旦建立，就不能再被更改的數據。對 Immutable 對象的任何修改或添加刪除操做都會返回一個新的 Immutable 對象,能夠避免deepCopy帶來的性能消耗
jsonwebtoken 前端token加密
moment Date對象操做
shortid 生成惟一key,經常使用在數組和map對象，對數據辨別去重等操做
@mdx-js/tag 根據Markdown語法將組件映射到HTML元素
ramda JavaScript 函數庫
transform-react-remove-prop-types 在production 刪除 prop types 代碼

react 經常使用開發依賴 package

react-hot-loader 保留react組件狀態的同時熱加載局部更新，依賴 webpack 的 HotModuleReplacement 熱加載插件
react-docgen-typescript react ts文檔提示
react-dev-utils create-react-app 提供的公共模塊

webpack bundle 優化

Tree-shaking

用於描述移除 JavaScript 上下文中的未引用代碼(dead-code)
Tree-shaking 在production環境使用，要開啓package.json中 {sideEffects:true}
Tree-shaking 只能消除沒有被引用的變量和函數，不能消除類
ES6模塊依賴關係是肯定的，和運行時的狀態無關，能夠進行可靠的靜態分析。 Tree-shaking以此做爲基礎區分

實踐

babel-plugin-import —— 按需引入點擊進入antd官網說明

{
  plugins: [
      ["import", 
        { "libraryName": "antd", 'libraryDirectory': 'es', "style": true }
      ]
  ]
}
複製代碼

babel-plugin-ramda —— ramda Tree Shake

{
  plugins: [
    ["ramda", {
      "useES": true
    }]
  ,
}
複製代碼

webpack bundle文件去重
todo 等一下本身研究一下下面兩個配置的區別

{
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
          name: "commons",
        }),
        new webpack.optimize.CommonsChunkPlugin({
          children: true,
          async: true,
          minChunks: 2, // the least number of chunks reusing a module before module can be exported
        }),
      ]
}
複製代碼

Code split

入口起點：使用 entry 配置手動地分離代碼。
防止重複：使用 CommonsChunkPlugin 去重和分離 chunk
動態導入：經過模塊的內聯函數調用來分離代碼

lazy-load

開發速度和打包優化

hmr 與 hot-loader

happypack

hardsource

bundle-analyzer

css minimize

transform-react-remove-prop-types

{
  "presets": [["es2015", { "modules": false }], "stage-2", "react"],
  "env": {
    "production": {
      "plugins": ["transform-react-remove-prop-types"]
    }
  }
}
複製代碼