原创 webpack 4 筆記五 模塊熱替換
隨着深入學習，新的知識點不斷出現，一些知識點可能涉及到很深的知識架構，這裏只是簡單的接觸，並不深入，在以後深入使用時再做詳細介紹。 模塊熱替換 模塊熱替換(Hot Module Replacement 或 HMR)是 webpac
2020-06-01 06:30:11
原创 webpack 4 筆記二 管理資源之加載css、圖片、字體、數據
根據 官方文檔 繼續學習。 根據前文，已完成了 webpack 的初步構建，本章是將css、圖片、字體、數據等資源結合到 wenpack 的一種嘗試，會遇到什麼 bug 呢？讓我們拭目以待吧? 前言 本文需要手動本地添加的文件如
2020-06-01 06:30:11
原创 webpack 4 筆記三 輸出管理
接下來的管理輸出，不需要使用上一節中使用到的資源文件，所以需要先將上一節中加載css、圖片、字體、數據的文件與代碼行做一個清理。 回退處理 在上一筆記中，基本根據官方文檔完成了 webpack 的局部安裝與加載 css、圖片、字體
2020-06-01 06:30:11
原创 Gulp的使用(二)——插件與第一個項目與坑坑坑坑
裝好了gulp，接下來就是大戰身手的時候了? 首先，當然是先裝幾個必須用到且簡單的插件，其他以後在探索~ 一、常用插件： 文檔操作 gulp-concat：合併文檔 gulp-rename：重命名文檔 壓縮 gulp-uglif
2020-06-01 06:30:11
原创 關於前端自動化工具Gulp的使用(一)——初次接觸與安裝
背景 前段時間在網上看了一些優秀的前端面試者簡歷， eg： http://www.flqin.com/ http://zhangwenli.com/cv/ 在我這初初初級階段看起來是十分高大上的，再看看自己的白紙一張的慘不忍睹的簡
2020-06-01 06:30:11
原创 webpack 4 筆記四 source map 與開發工具 webpack-dev-server
根據前文，完成了對輸出文件的管理。 現在，根據說明文檔，建立一個開發環境，使開發變得更容易一些。主要是兩個方面，一是使用 source map 來追蹤錯誤和警告信息的位置，二是使用 webpack-dev-server 自動編譯代
2020-06-01 06:30:11
原创 webpack 4 筆記一 簡介及安裝
2019年3月25日更新，目前 webpack 版本爲4.29.6 。本文根據 webpack 中文文檔，謹以此記錄實操過程，以及遇到的一些疑點難點。如有經驗，最好的方法當然是直接閱讀 官方文檔，跟着碼一遍。 前言 webpack
2020-06-01 06:30:11
原创 關於在Windows上安裝nodejs版本管理器nvm的兩三事
一、背景 之前學習vue框架，爲方便學習，接觸並使用Nodejs版本管理工具–nvm，由於已經安裝了node和npm，導致按照網上一些教程步驟安裝nvm時出現了一些錯誤，浪費了不少時間，現就自己在window系統上安裝nvm的過程
2020-06-01 06:30:11
原创 webpack 4 筆記八 高速緩存
上一節中嘗試了對輸出的代碼進行一個拆分，現在嘗試一種叫做緩存的技術吧 官方文檔 使用webpack捆綁我們的模塊化應用程序，從而生成可部署的/dist目錄。一旦將內容/dist部署到服務器，客戶端（通常是瀏覽器）將訪問該服務器以獲取
2019-04-06 13:42:28
原创 webpack 4 筆記七 代碼拆分
代碼拆分 官方文檔. 代碼拆分是webpack最引人注目的功能之一。此功能允許您將代碼拆分爲各種捆綁包，然後可以按需或並行加載。它可用於實現更小的捆綁並控制資源負載優先級，如果使用得當，可能會對加載時間產生重大影響。 可用的代碼
2019-04-05 14:11:17
原创 webpack 4 筆記六 關於tree shaking
tree shaking 是一個術語，通常用於描述移除 JavaScript 上下文中的未引用代碼(dead-code) 如果將應用程序比作一棵樹。 綠色表示實際用到的源碼和 library，是樹上活的樹葉。 灰色則表示無用的代碼
2019-04-04 13:15:52
原创 webpack 筆記五 模塊熱替換
隨着深入學習，新的知識點不斷出現，一些知識點可能涉及到很深的知識架構，這裏只是簡單的接觸，並不深入，在以後深入使用時再做詳細介紹。 模塊熱替換 模塊熱替換(Hot Module Replacement 或 HMR)是 webpack
2019-04-02 13:14:52
原创 webpack筆記四 source map 與開發工具 webpack-dev-server
根據前文，完成了對輸出文件的管理。 現在，根據說明文檔，建立一個開發環境，使開發變得更容易一些。主要是兩個方面，一是使用 source map 來追蹤錯誤和警告信息的位置，二是使用 webpack-dev-server 自動編譯代碼。
2019-04-02 13:14:40
原创 webpack筆記三 回退處理、管理輸出
回退處理 在上一筆記中，基本根據官方文檔完成了 webpack 的局部安裝與加載 css、圖片、字體、數據，接下來因爲無需使用到上一節中使用到的資源，所以需要清除之前的文件 src comci.woff love.jpg style
2019-03-29 13:14:52
1
原创 第二章 webpack管理資源之加載css、圖片、字體、數據
根據 官方中文文檔 繼續學習。 根據前文，已完成了 webpack 的初步構建，本章是將css、圖片、字體、數據等資源結合到 wenpack 的一種嘗試，會遇到什麼 bug 呢？讓我們拭目以待吧😭 前言 本文需要手動本地添加的文件如
2019-03-27 13:14:25