摘要:基本配置項基本配置項。的插件架構主要基于實現的,這個就是專注于事件的廣播和操作。開啟多進程,加快打包速度。
這次我們主要研究的是webpack框架的相關知識,webpack是一個打包構建的前端框架,用于解決前端開發的模塊化問題。應用場景和縱向比較
說到webpack,肯定你還會想到gulp和grunt這些框架,那么webpack是做什么的呢?他和其他的框架有什么區別呢?我們一起來分析一下。
在這一段落中我們主要對webpack和gulp進行縱向的比較分析:
webpack的根本任務是進行打包,把在一個文件中引用的另外一個文件,都打包在一起。
gulp根本任務是實現自動化,其實我們自己可以寫一段node腳本實現所有js文件的壓縮。gulp就是封裝好腳本來幫我們做這些事
還有:
webpack其實也可以實現js文件的壓縮,但是這只不過是在完成打包任務的大背景下,所完成的額外任務
那么使用場景呢?我在什么情況下該用webpack,我在什么情況下該用gulp,筆者認為,這就仁者見仁智者見智了,如果說,你就是在開發工程中為了打包,為了模塊化,那么你一定要用webpack啊,還有你希望實現解析sass直接放入html中,那么這可以用webpack實現,在打包的過程中就順手完成了。但是,你初次之外,還想實現,在上線構建的時候,把圖片上傳cdn并且替換鏈接,那么你就需要額外引入gulp。webpack和gulp都有自己的長處和短處,分析好這兩個框架,你就可以在使用過程中如魚得水。
基本配置項基本配置項。我們首先說說如何定義基本配置項,第一是我們可以shell的方式,定義配置,都寫在命令行上,但是這種方式不好,配置項一多,執行的命令就特別長。因此我們一般采用的都是配置文件的方式。
const path = require("path"); module.exports = { // entry 表示 入口,Webpack 執行構建的第一步將從 Entry 開始,可抽象成輸入。 // 類型可以是 string | object | array entry: "./app/entry", // 只有1個入口,入口只有1個文件 entry: ["./app/entry1", "./app/entry2"], // 只有1個入口,入口有2個文件 entry: { // 有2個入口 a: "./app/entry-a", b: ["./app/entry-b1", "./app/entry-b2"] }, // 如何輸出結果:在 Webpack 經過一系列處理后,如何輸出最終想要的代碼。 output: { // 輸出文件存放的目錄,必須是 string 類型的絕對路徑。 path: path.resolve(__dirname, "dist"), // 輸出文件的名稱 filename: "bundle.js", // 完整的名稱 filename: "[name].js", // 當配置了多個 entry 時,通過名稱模版為不同的 entry 生成不同的文件名稱 filename: "[chunkhash].js", // 根據文件內容 hash 值生成文件名稱,用于瀏覽器長時間緩存文件 // 發布到線上的所有資源的 URL 前綴,string 類型 publicPath: "/assets/", // 放到指定目錄下 publicPath: "", // 放到根目錄下 publicPath: "https://cdn.example.com/", // 放到 CDN 上去 // 導出庫的名稱,string 類型 // 不填它時,默認輸出格式是匿名的立即執行函數 library: "MyLibrary", // 導出庫的類型,枚舉類型,默認是 var // 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp , libraryTarget: "umd", // 是否包含有用的文件路徑信息到生成的代碼里去,boolean 類型 pathinfo: true, // 附加 Chunk 的文件名稱 chunkFilename: "[id].js", chunkFilename: "[chunkhash].js", // JSONP 異步加載資源時的回調函數名稱,需要和服務端搭配使用 jsonpFunction: "myWebpackJsonp", // 生成的 Source Map 文件名稱 sourceMapFilename: "[file].map", // 瀏覽器開發者工具里顯示的源碼模塊名稱 devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // 異步加載跨域的資源時使用的方式 crossOriginLoading: "use-credentials", crossOriginLoading: "anonymous", crossOriginLoading: false, }, // 配置模塊相關 module: { rules: [ // 配置 Loader { test: /.jsx?$/, // 正則匹配命中要使用 Loader 的文件 include: [ // 只會命中這里面的文件 path.resolve(__dirname, "app") ], exclude: [ // 忽略這里面的文件 path.resolve(__dirname, "app/demo-files") ], use: [ // 使用那些 Loader,有先后次序,從后往前執行 "style-loader", // 直接使用 Loader 的名稱 { loader: "css-loader", options: { // 給 html-loader 傳一些參數 } } ] }, ], noParse: [ // 不用解析和處理的模塊 /special-library.js$/ // 用正則匹配 ], }, // 配置插件 plugins: [ ], // 配置尋找模塊的規則 resolve: { modules: [ // 尋找模塊的根目錄,array 類型,默認以 node_modules 為根目錄 "node_modules", path.resolve(__dirname, "app") ], extensions: [".js", ".json", ".jsx", ".css"], // 模塊的后綴名 alias: { // 模塊別名配置,用于映射模塊 // 把 "module" 映射 "new-module",同樣的 "module/path/file" 也會被映射成 "new-module/path/file" "module": "new-module", // 使用結尾符號 $ 后,把 "only-module" 映射成 "new-module", // 但是不像上面的,"module/path/file" 不會被映射成 "new-module/path/file" "only-module$": "new-module", }, alias: [ // alias 還支持使用數組來更詳細的配置 { name: "module", // 老的模塊 alias: "new-module", // 新的模塊 // 是否是只映射模塊,如果是 true 只有 "module" 會被映射,如果是 false "module/inner/path" 也會被映射 onlyModule: true, } ], symlinks: true, // 是否跟隨文件軟鏈接去搜尋模塊的路徑 descriptionFiles: ["package.json"], // 模塊的描述文件 mainFields: ["main"], // 模塊的描述文件里的描述入口的文件的字段名稱 enforceExtension: false, // 是否強制導入語句必須要寫明文件后綴 }, // 輸出文件性能檢查配置 performance: { hints: "warning", // 有性能問題時輸出警告 hints: "error", // 有性能問題時輸出錯誤 hints: false, // 關閉性能檢查 maxAssetSize: 200000, // 最大文件大小 (單位 bytes) maxEntrypointSize: 400000, // 最大入口文件大小 (單位 bytes) assetFilter: function(assetFilename) { // 過濾要檢查的文件 return assetFilename.endsWith(".css") || assetFilename.endsWith(".js"); } }, devtool: "source-map", // 配置 source-map 類型 context: __dirname, // Webpack 使用的根目錄,string 類型必須是絕對路徑 // 配置輸出代碼的運行環境 target: "web", // 瀏覽器,默認 target: "webworker", // WebWorker target: "node", // Node.js,使用 `require` 語句加載 Chunk 代碼 target: "async-node", // Node.js,異步加載 Chunk 代碼 target: "node-webkit", // nw.js target: "electron-main", // electron, 主線程 target: "electron-renderer", // electron, 渲染線程 externals: { // 使用來自 JavaScript 運行環境提供的全局變量 jquery: "jQuery" }, stats: { // 控制臺輸出日志控制 assets: true, colors: true, errors: true, errorDetails: true, hash: true, }, devServer: { // DevServer 相關的配置 proxy: { // 代理到后端服務接口 "/api": "http://localhost:3000" }, contentBase: path.join(__dirname, "public"), // 配置 DevServer HTTP 服務器的文件根目錄 compress: true, // 是否開啟 gzip 壓縮 historyApiFallback: true, // 是否開發 HTML5 History API 網頁 hot: true, // 是否開啟模塊熱替換功能 https: false, // 是否開啟 HTTPS 模式 }, profile: true, // 是否捕捉 Webpack 構建的性能信息,用于分析什么原因導致構建性能不佳 cache: false, // 是否啟用緩存提升構建速度 watch: true, // 是否開始 watchOptions: { // 監聽模式選項 // 不監聽的文件或文件夾,支持正則匹配。默認為空 ignored: /node_modules/, // 監聽到變化發生后會等300ms再去執行動作,防止文件更新太快導致重新編譯頻率太高 // 默認為300ms aggregateTimeout: 300, // 判斷文件是否發生變化是不停的去詢問系統指定文件有沒有變化,默認每秒問 1000 次 poll: 1000 }, }
以上我們就是webpack中大部分的配置項,其實我們可以發現,最重要四個是entry、output、loader和plugin分別代表入口,出口,加載器和插件。具體的配置信息和其他的配置項就不一一介紹了。
建議大家看一下webpack的官方文檔,具體了解一下每一個配置項的含義,就算都記不下來,也最好有點印象。
首先我們看一下webpack的整體原理:
初始化參數:從配置文件和 Shell 語句中讀取與合并參數,得出最終的參數;
開始編譯:用上一步得到的參數初始化 Compiler 對象,加載所有配置的插件,執行對象的 run 方法開始執行編譯;
確定入口:根據配置中的 entry 找出所有的入口文件;
編譯模塊:從入口文件出發,調用所有配置的 Loader 對模塊進行翻譯,再找出該模塊依賴的模塊,再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理;
完成模塊編譯:在經過第4步使用 Loader 翻譯完所有模塊后,得到了每個模塊被翻譯后的最終內容以及它們之間的依賴關系;
輸出資源:根據入口和模塊之間的依賴關系,組裝成一個個包含多個模塊的 Chunk,再把每個 Chunk 轉換成一個多帶帶的文件加入到輸出列表,這步是可以修改輸出內容的最后機會;
輸出完成:在確定好輸出內容后,根據配置確定輸出的路徑和文件名,把文件內容寫入到文件系統。
然后我們再看一下webpack中plugin的原理
在使用htmlWebpackPluin的過程中,發現打包出的index.html文件,js引用了兩次,由于自己了解plugin的原理,于是動手寫了一個。
webpack 的插件架構主要基于Tapable實現的,這個Tapable就是專注于事件的廣播和操作。在webpack的編譯過程中會廣播很多事件,插件可以自己去監聽這些事件,在webpack執行到相應的時機做某些操作,然后插件也可以廣播事件。
下面就是具體api的實現了,webpack中有complier對象,代表webpack實例。有編譯的具體參數。還有一個complation代表本次編譯,有打包的文件等信息。
在complier上面綁定plugin和apply。在回調函數中傳入complation對象。
plugins: [ function () { this.plugin("done", (stats) => { stats.toJson(true).chunks.filter(c => c.entry).forEach(c => { let fileContent = fs.readFileSync((path.join(BUILD_PATH, "views/main.pug"))).toString("utf-8") fs.writeFileSync(path.join(BUILD_PATH, "views/main.pug"), fileContent.replace(/webpack-bundle.*src="(.*)"/g, (match, p1) => { return match.replace(p1, PUBLIC_PATH + c.files[0]) })) }) }) } ]常見問題分析 webpack配置中遇到的問題
css-loader中importLoaders=1參數的問題
問題是加載的css文件中import了一個css文件,雖然可以被引入最后的html中,但是引入的css未經過postcss的處理,因此加上了這個,就ok了
Mac平臺和Windows平臺的差異導致的問題
// 配置entry選項時: entry: { main: __dirname + "/src/index.js" } // /和的問題 const path = require("path"); const entryPath = path.resolve(__dirname, "/src/index.js"); entry: { main: entryPath }
不能滿足業務需求,自定義plugin的經過
如上
縮小查找文件的范圍
利用loader中的exclude和include。
利用reslove中的moudules,這個可以在require時指明存放第三方模塊的路徑。
利用動態鏈接庫
利用插件DllPlugin,可以打包出一個個多帶帶的動態鏈接庫文件。原因在于包含大量復用模塊的動態鏈接庫只需要編譯一次,在之后的構建過程中被動態鏈接庫包含的模塊將不會在重新編譯,而是直接使用動態鏈接庫中的代碼。
開啟打包編譯多進程
運行在Node.js之上的webpack是單線程模型的,也就是說webpack需要處理的任務需要一件件挨著做,不能多個事情一起做。利用插件HappyPack,webpack中最耗時的就是loader這一步,HappyPack它把任務分解給多個子進程去并發的執行,子進程處理完后再把結果發送給主進程。
提取公共代碼
利用CommonsChunkPlugin插件提取公共代碼。
htmlWebpackPlugin用來自動向html文件中加入js和css的文件引入。
CommonsChunkPlugin可以打包公共部分代碼(聽說4.0已經不用了)。
HappyPack開啟多進程,加快打包速度。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93360.html
摘要:插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins譯者:jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
摘要:系列文章系列第一篇基礎雜記系列第二篇插件機制雜記系列第三篇流程雜記前言公司的前端項目基本都是用來做工程化的,而雖然只是一個工具,但內部涉及到非常多的知識,之前一直靠來解決問題,之知其然不知其所以然,希望這次能整理一下相關的知識點。 系列文章 Webpack系列-第一篇基礎雜記 Webpack系列-第二篇插件機制雜記 Webpack系列-第三篇流程雜記 前言 公司的前端項目基本都是用...
摘要:通過各種和的相關配置,將復雜的文件和依賴包細化打包,使得無論是開發還是上線發布都大大節省了效率。所以我們將移入內。寫在最后這是自己第一次寫學習筆記,自知內容比較基礎還需要深入研究,算是自己對相關知識的梳理吧。 Webpack是什么? A bundler for javascript and friends. Packs many modules into a few bundled a...
摘要:前端每周清單年度總結與盤點在過去的八個月中,我幾乎只做了兩件事,工作與整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址,感謝每一位閱讀鼓勵過的朋友,希望你們能夠繼續支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結與盤點 在過去的八個月中,我幾乎只做了...
摘要:前言月份開始出沒社區,現在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了一般來說,差不多到了轉正的時候,會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區,現在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了!一般來說,差不多到了轉正的時候,會進行總結或者分享會議!那么今天我就...
閱讀 1572·2021-11-25 09:43
閱讀 2476·2019-08-30 15:54
閱讀 2938·2019-08-30 15:53
閱讀 1087·2019-08-30 15:53
閱讀 747·2019-08-30 15:52
閱讀 2538·2019-08-26 13:36
閱讀 807·2019-08-26 12:16
閱讀 1210·2019-08-26 12:13