<input id="0qass"><u id="0qass"></u></input>
  • <input id="0qass"><u id="0qass"></u></input>
  • <menu id="0qass"><u id="0qass"></u></menu>

    代碼構建與webpack知識點

    1、Webpack 工具都做了些什么

    • 如今前端項目大多數都使用了模塊化,而如果想要將多個文件的代碼打包成最終可按照預期運行的代碼,則需要使用到代碼構建工具。
    • 不管項目代碼是如何進行組織的,項目中又有多少個文件,最終瀏覽器依然會從 HTML 內容進行解析和加載,因此我們需要對項目中的代碼進行構建(包括編譯和打包),生成瀏覽器可正常解析和加載的內容

    2、常見的前端構建工具

    對于前端開發來說,我們會用到各式各樣的構建/打包工具:
    在這里插入圖片描述

    涉及模塊化代碼打包的主要有 Grunt/Gulp/Webpack/Rollup

    • Gulp/Grunt 是一種能夠優化前端工作流程的工具,比如自動刷新頁面、combo、壓縮 CSS/JavaScript、編譯 Less/Sass 等

    • Webpack/Rollup 是一個 JavaScript 的模塊打包器,用于整合編譯成最終的代碼。

    • 其中,Rollup 通常用來構建庫,Webpack 更適合用來構建應用程序。

    3、了解Webpack

    Webpack 的使用中有 4 個核心概念:入口(entry)、輸出(output)、Loader、插件(plugins)

    (1)入口(entry)

    首先便是入口(entry),entry 指向我們前端應用的第一個啟動文件。例如,在 Vue 中是new Vue()位置所在的文件,在 Angular 中是啟動.bootstrap()的文件,在 React 中則是ReactDOM.render()或者是React.render()的啟動文件。

    // 將entry指向啟動文件即可
    module.exports = {
      entry: "./path/to/my/entry/file.js",
    };
    

    或許你會疑惑,入口的一個文件,又是怎樣把整個前端項目中的代碼關聯起來,并進行打包的呢?

    實際上, Webpack 會從 entry 開始,通過解析模塊間的依賴關系,遞歸地構建出一個依賴圖

    (2)輸出(output)

    輸出(output)字段用于告訴 Webpack 要將打包后的代碼生成的文件名是什么(filename),以及將它們放在哪里(path)。## 入口(entry)

    module.exports = {
      output: {
        filename: "bundle.js", // 編譯文件的文件名,比如 main.js/bundle.js/index.js
        path: "/home/proj/public/assets", // 對應一個絕對路徑,此路徑是你希望一次性打包的目錄
      },
    };
    

    (3)Loader

    • 要了解 Loader,你需要知道在 Webpack 中,每個文件(.css,.html,.scss,.jpg等) 都會被作為模塊處理。如果你看過生成的 bundle.js 代碼就會發現,Webpack 將所有的模塊打包一起,每個模塊添加標記id,通過這樣一個 id 去獲取所需模塊的代碼。
    • 但實際上,Webpack 只理解 JavaScript,因此 Loader 的作用就是把不同的模塊和文件(比如 HTML、CSS、JSX、Typescript 等)轉換為 JavaScript 模塊。
    • 而不同的應用場景需要不同的 Loader,比如我們經常會使用到的 CSS 相關 Loader 和其他資源 Loader。
      在這里插入圖片描述

    深度理解:

    • ES6 模塊需要依賴 Babel 編譯和 Webpack 打包,而 Babel 在 Webpack 中就是使用 Loader 的方式來進行編譯的。
    • babel-loader 將 ES6/ES7 語法編譯生成 ES5,其中部分特性還需要 babel-polyfill 支持。這是因為 Babel 默認只轉換新的 JavaScript 語法(比如const/let),但不會對新的 API(比如Promise)進行處理。
    • Webpack 在編譯過程中,支持多個 Loader 通過流水線的方式進行先后編譯,編譯的順序為從后往前,最終以 JavaScript模塊的方式輸出。
    • 到這里,我們知道 Webpack 以 entry 為入口,鏈式調用各個 Loader 進行編譯生成 JavaScript,最終打包放置在output 中。其中 Loader 只負責將其他非 JavaScript 模塊轉換成 JavaScript 模塊。

    (4)插件(plugins)

    插件(plugins)主要負責解決 Loader 無法做到的事情,它可以訪問在 Webpack 編譯過程中的關鍵事件,對 Webpack 內部示例的一些數據進行處理,處理完成后回調 Webpack 讓其繼續。

    這樣說或許有些抽象,我們直接來看看幾個常用的插件就明白了。

    • HtmlwebpackPlugin:可以生成創建 HTML 入口文件,也可以為 HTML 文件中引入的外部資源如 script、link 動態添加每次編譯后的哈希值,防止引用緩存的外部文件問題。
    • CommonsChunkPlugin:用來提取代碼中的公共模塊,并將這些公共模塊按照預期進行打包生成獨立的文件。
    • ProvidePlugin:用來定義標識符,當遇到指定標識符的時候自動加載模塊,適合引入的全局變量(比如 jQuery)。
    • ExtractTextPlugin:可以將樣式從 JavaScript 中抽出,生成單獨的 .css 樣式文件。

    總結

    webpack的插件是可以用來控制最終生成的代碼是如何進行組織和輸出的,包括對代碼的打包優化、壓縮,甚至是啟用模塊熱替換、重新定義環境中的變量,等等。

    Webpack 到底對項目代碼做了什么?

    (1) 通過 entry 指定的入口開始,解析各個文件模塊間的依賴。

    (2)根據模塊間的依賴關系,開始對各個模塊進行編譯。

    (3)編譯過程中,根據配置的規則對一些模塊使用 Loader 進行編譯處理。

    (4)根據插件的配置,對 Loader 編譯后的代碼進行封裝、優化、分塊、壓縮等。

    (5)最終 Webpack 整合各個模塊,根據依賴關系將它們打包成最終的一個或者多個文件。

    最終讓前端項目中模塊化的代碼能最終在瀏覽器中進行加載、并正常地工作。

    相關推薦
    ??2020 CSDN 皮膚主題: 創作都市 設計師:CSDN官方博客 返回首頁
    多乐彩