了解Webpack嗎？

Cympros 發布于2019-08-23 18:29 / 2853人閱讀

摘要：你了解嗎核心概念的核心概念大致分為四個入口出口插件，是一個打包模塊化的工具，專注構建模塊化項目。優點只更新變更內容，以節省寶貴的開發時間。在構建過程中，將引用的靜態資源路徑修改為上對應的路徑。可以通過在啟動時追加參數來實現提取公共代碼。

你了解Webpack嗎？ 核心概念

Webpack的核心概念大致分為四個：入口、出口、loader、插件，是一個打包模塊化js的工具，專注構建模塊化項目。

是一個模塊打包器，強調模塊化方案

打包的原理

把所有的依賴打包成一個bundle.js,然后通過代碼分割單元片段并按需加載

1、入口

module.exports = {
    entry: "./src",  //單入口
    // or
    entry: [
        "./src", //多入口
        "/src2",
    ],
    // or
    entry: {
        main: "./src", //對象寫法的單入口簡寫
    }
    //or
    entry: {
        app: "./src/index.js", //對象寫法的第三方庫寫法
        vendors: "./src/script/moment.js"
    }
    // or
    entry: {
        page1: "./src/page1.js",
        page2: "./src/page2.js",
        page3: "./src/page3.js",
    }
    
}

其實入口很簡單

2、出口 output

module.exports = {
    /*
    output接受對象屬性，參數為
    filename: 打包后的文件名
    path: 打包后所需導出的路徑
    */
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "/dist")
    }
    // or 多入口
    entry: {
        app: "./src/index.js", 
        vendors: "./src/script/moment.js"
    },
    output: {
        filename: "[name].js",
        path: __dirname + "dist"
    }
}

3、Loader 加載器主要用于源代碼進行轉換

用于記載某些資源文件，因為本身只能打包common.js規范的js文件,對于其他資源如css，img等，是沒有辦法加載的，這時就需要對應的loader將資源轉化，從而進行喜歡轉化

4、插件 plugin

用于擴展webpack 的功能，不同于loader，plugin的功能更加的豐富比如壓縮，優化，不只局限于資源的餓加載

常見的插件和常見的loader

plugin:
html-webpack-plugin 打包結束后，在dist目錄中自動生成一個html文件，并把打包生成的js自動引入到這個html文件中
clean-webpack-plugin 刪除打包文件
webapck-dev-server 實現自動打包編譯功能（將dist文件托管到內存中）,并開啟熱更新功能
uglifyjs-webpack-plugin:通過UglifyES壓縮ES6代碼

loader:
css-loader 加載 CSS，支持模塊化、壓縮、文件導入等特性
style-loader 把 CSS 代碼注入到 JavaScript 中，通過 DOM 操作去加載 CSS
url-loader：在文件很小的情況下以 base64 的方式把文件內容注入到代碼中去
babel-loader 把 ES6 轉換成 ES5
source-map-loader 加載額外的 Source Map 文件，以方便斷點調試
eslint-loader：通過 ESLint 檢查 JavaScript 代碼

關于熱更新

定義：模塊熱更新是webpack的一個功能，它可以使得代碼修改之后，不用刷新瀏覽器就可以更新。

優點：只更新變更內容，以節省寶貴的開發時間。調整樣式更加快速，幾乎相當于在瀏覽器中更改樣式

webpack與grunt、gulp的不同

grunt、gulp早期比較流行、一些輕量化的任務還是會用gulp來處理的，對其做系列的鏈式操作、更新流的數據、構成了一個任務、

webpack基于入口的，webpack會自動的遞歸，然后用不同的loader來處理不同的文件，用plugin來擴展功能

類似的工具、談談你最終的選擇使用webpack

webpack 用于大型的前端站點

rollup適用于基礎庫的打包、如Vue、react

parcel適用于實驗性項目

構建的流程、從讀取的輸出文件這個過程盡量說全

1、初始化參數、

2、開始編譯、

3、確定編譯

4、完成模塊編譯

5、完成模塊的編譯

6、輸出資源

7、輸出完成

是否自己loader和plugin描述一下思路

將源文件一步步翻譯成想要的樣子、編寫Loader只做一種“轉義”，每個Loder拿到是源文件內容、可以通過返回值的方式將處理后的內容輸入，相對于loader而言，plugin的編寫

利用webpack來進行前端的優化

壓縮代碼。刪除多余的代碼、注釋、簡化代碼的寫法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin來壓縮JS文件，利用cssnano（css-loader?minimize）來壓縮css

利用CDN加速。在構建過程中，將引用的靜態資源路徑修改為CDN上對應的路徑。可以利用webpack對于output參數和各loader的publicPath參數來修改資源路徑

刪除死代碼（Tree Shaking）。將代碼中永遠不會走到的片段刪除掉。可以通過在啟動webpack時追加參數--optimize-minimize來實現

提取公共代碼。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105318.html

前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

Kerr1Gan 2019-08-26 12:20 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

lushan 2019-08-02 11:34 評論0 收藏0
前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

答案自己谷歌或百度找。一、來源背景面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

joyvw 2019-08-30 15:54 評論0 收藏0
2019前端秋季社招面試經歷總結（三年經驗）

摘要：經歷月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。現在是面試了家公司左右，有些高頻問題會標記次數總次數，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯的地方請不吝賜教，謝謝。經歷 7月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。一開始廣泛看面試題，沒抓住重點復習，有很多平時也沒怎么用到，導致一開始面試的時候，問的問題...

Kross 2019-08-02 15:41 評論0 收藏0
記錄一下自己的春招，唯品會、360、京東offer已收、騰訊offer_call已達！！！

摘要：春招結果五月份了，春招已經接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底，截止今天，已經斬獲唯品會電商前端研發部大數據與威脅分析事業部京東精銳暑假實習生的騰訊的是早上打過來的。春招結果五月份了，春招已經接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底，截止今天，已經斬獲唯品...

freewolf 2019-08-22 16:57 評論0 收藏1