了解Webpack嗎？

Cympros 發(fā)布于2019-08-23 18:29 / 2847人閱讀

摘要：你了解嗎核心概念的核心概念大致分為四個(gè)入口出口插件，是一個(gè)打包模塊化的工具，專(zhuān)注構(gòu)建模塊化項(xiàng)目。優(yōu)點(diǎn)只更新變更內(nèi)容，以節(jié)省寶貴的開(kāi)發(fā)時(shí)間。在構(gòu)建過(guò)程中，將引用的靜態(tài)資源路徑修改為上對(duì)應(yīng)的路徑。可以通過(guò)在啟動(dòng)時(shí)追加參數(shù)來(lái)實(shí)現(xiàn)提取公共代碼。

你了解Webpack嗎？ 核心概念

Webpack的核心概念大致分為四個(gè)：入口、出口、loader、插件，是一個(gè)打包模塊化js的工具，專(zhuān)注構(gòu)建模塊化項(xiàng)目。

是一個(gè)模塊打包器，強(qiáng)調(diào)模塊化方案

打包的原理

把所有的依賴(lài)打包成一個(gè)bundle.js,然后通過(guò)代碼分割單元片段并按需加載

1、入口

module.exports = {
    entry: "./src",  //單入口
    // or
    entry: [
        "./src", //多入口
        "/src2",
    ],
    // or
    entry: {
        main: "./src", //對(duì)象寫(xiě)法的單入口簡(jiǎn)寫(xiě)
    }
    //or
    entry: {
        app: "./src/index.js", //對(duì)象寫(xiě)法的第三方庫(kù)寫(xiě)法
        vendors: "./src/script/moment.js"
    }
    // or
    entry: {
        page1: "./src/page1.js",
        page2: "./src/page2.js",
        page3: "./src/page3.js",
    }
    
}

其實(shí)入口很簡(jiǎn)單

2、出口 output

module.exports = {
    /*
    output接受對(duì)象屬性，參數(shù)為
    filename: 打包后的文件名
    path: 打包后所需導(dǎo)出的路徑
    */
    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 加載器主要用于源代碼進(jìn)行轉(zhuǎn)換

用于記載某些資源文件，因?yàn)楸旧碇荒艽虬點(diǎn)ommon.js規(guī)范的js文件,對(duì)于其他資源如css，img等，是沒(méi)有辦法加載的，這時(shí)就需要對(duì)應(yīng)的loader將資源轉(zhuǎn)化，從而進(jìn)行喜歡轉(zhuǎn)化

4、插件 plugin

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

常見(jiàn)的插件和常見(jiàn)的loader

plugin:
html-webpack-plugin 打包結(jié)束后，在dist目錄中自動(dòng)生成一個(gè)html文件，并把打包生成的js自動(dòng)引入到這個(gè)html文件中
clean-webpack-plugin 刪除打包文件
webapck-dev-server 實(shí)現(xiàn)自動(dòng)打包編譯功能（將dist文件托管到內(nèi)存中）,并開(kāi)啟熱更新功能
uglifyjs-webpack-plugin:通過(guò)UglifyES壓縮ES6代碼

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

關(guān)于熱更新

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

優(yōu)點(diǎn)：只更新變更內(nèi)容，以節(jié)省寶貴的開(kāi)發(fā)時(shí)間。調(diào)整樣式更加快速，幾乎相當(dāng)于在瀏覽器中更改樣式

webpack與grunt、gulp的不同

grunt、gulp早期比較流行、一些輕量化的任務(wù)還是會(huì)用gulp來(lái)處理的，對(duì)其做系列的鏈?zhǔn)讲僮鳌⒏铝鞯臄?shù)據(jù)、構(gòu)成了一個(gè)任務(wù)、

webpack基于入口的，webpack會(huì)自動(dòng)的遞歸，然后用不同的loader來(lái)處理不同的文件，用plugin來(lái)擴(kuò)展功能

類(lèi)似的工具、談?wù)勀阕罱K的選擇使用webpack

webpack 用于大型的前端站點(diǎn)

rollup適用于基礎(chǔ)庫(kù)的打包、如Vue、react

parcel適用于實(shí)驗(yàn)性項(xiàng)目

構(gòu)建的流程、從讀取的輸出文件這個(gè)過(guò)程盡量說(shuō)全

1、初始化參數(shù)、

2、開(kāi)始編譯、

3、確定編譯

4、完成模塊編譯

5、完成模塊的編譯

6、輸出資源

7、輸出完成

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

將源文件一步步翻譯成想要的樣子、編寫(xiě)Loader只做一種“轉(zhuǎn)義”，每個(gè)Loder拿到是源文件內(nèi)容、可以通過(guò)返回值的方式將處理后的內(nèi)容輸入，相對(duì)于loader而言，plugin的編寫(xiě)

利用webpack來(lái)進(jìn)行前端的優(yōu)化

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

利用CDN加速。在構(gòu)建過(guò)程中，將引用的靜態(tài)資源路徑修改為CDN上對(duì)應(yīng)的路徑。可以利用webpack對(duì)于output參數(shù)和各loader的publicPath參數(shù)來(lái)修改資源路徑

刪除死代碼（Tree Shaking）。將代碼中永遠(yuǎn)不會(huì)走到的片段刪除掉。可以通過(guò)在啟動(dòng)webpack時(shí)追加參數(shù)--optimize-minimize來(lái)實(shí)現(xiàn)

提取公共代碼。