原创 webpack之文件監聽
webpack中的文件監聽 文件監聽是在源代碼發生變化時，自動構建出新的輸文件。 webpack開啓監聽模式，有兩種方式： 1.啓動webpack時，帶上--watch參數，可以在package.json中配置 "watch":"w
2020-02-22 17:23:39
原创 webpack之多頁面打包通用方案
多頁面應用（MPA） 概念： 每一次頁面跳轉的時候，後臺服務器都會返回一個新的html文檔，這種類型的網站也就是多頁網站，也叫做多頁應用 優勢： 頁面之間的解耦 更利於SEO 多頁面打包基本思路： 每個頁面對應一個entry,一個ht
2020-02-22 17:23:39
原创 webpack之自動補全css前綴
css3的屬性爲什麼需要前綴 瀏覽器的兼容性問題（瀏覽器的標準尚未統一） 谷歌：-webkit 火狐：-moz IE：-ms 歐朋：-o 舉個例子： display: -
2020-02-22 17:23:39
原创 如何動態渲染 .vue 文件
寫在開頭 你可能用過 jsfiddle 或 jsbin 之類的網站，在裏面你可以用 CDN 的形式引入 Vue.js，然後在線寫示例。不過，這類網站主要是一個 html，裏面包含 js、css 部分，渲染則是用 iframe 嵌入你編寫的
2020-02-22 17:23:39
原创 小程序生命週期簡介
我們先來看下面這張圖： 小程序生命週期： App()函數註冊一個小程序。接受一個Object參數，其指定小程序的生命週期回調等。這裏的生命週期針對整個小程序項目，而不是哪個頁面。 object參數說明： 前臺、後臺定義： 當用戶點擊左上
2020-02-22 17:23:39
原创 webpack之Scope Hoisting
我們先來簡單分析一下：（沒有開啓Scope Hoisting ） 現象：構建後的代碼存在大量的閉包代碼 [ (function (module, __webpack_exports__, __webpack_require__) {
2020-02-22 17:23:39
原创 webpack之構建日誌
當我們執行構建命令時候，會出現如下效果： 事實上，很多時候我們並不關注這些，只關注是否構建成功和錯誤信息。下面我們就一起來解決這個需求，讓我們的命令行清爽整潔 不依賴插件 通過在webpack.config.js中設置stats 統計
2020-02-22 17:23:39
原创 webpack之解析圖片，字體
我先簡單介紹下這兩個loader: file-loader 用於處理文件 url-loader也可以處理圖片和字體，可以設置較小資源自動base64，減少http請求 下面我以file-loader爲例介紹webpack解析圖片字體：
2020-02-22 17:23:39
原创 webpack之移動端css px自動轉換成rem
1.安裝依賴： cnpm i px2rem-loader lib-flexible -D 2.配置： { test:/\.css/, use:[ MiniCssExtractPlugin.loader
2020-02-22 17:23:39
原创 webpack之清除構建目錄
安裝：cnpm i CleanWebpackPlugin -D clean-webpack-plugin插件是用於在下一次打包時清除之前打包的文件，避免構建前每次都需要手動刪除dist 使用 clean-webpack-plugin(
2020-02-22 17:23:39
原创 TypeScript中的泛型
很多時候我們希望一個函數或者一個類可以支持多種數據類型，有很大的靈活性。 很多小夥伴可能會想到函數重載，聯合類型，或者any類型等。 函數重載代碼量大，聯合類型冗長。 function log(value:any):any{ c
2020-02-22 17:23:39
原创 TypeScript高級類型之條件類型
什麼是條件類型 含義：是一種由條件表達式所決定的類型； 基本語法：T extends U ? X : Y 代表的含義爲：如果類型T可以被賦值給類型U ，那麼就是X類型，否則就是Y類型； 作用：條件類型使類型具有了不唯一性，增加了語言的靈
2020-02-22 17:23:39
原创 Vue extend的基本用法
我們創建Vue實例時，都會有一個el選項，來指定實例的根節點，如果不寫el選項，那組件就處於未掛載狀態。Vue.extend 的作用，就是基於 Vue 構造器，創建一個‘ 子類 ’，它的參數跟new Vue的基本一樣，但data要跟組件一
2020-02-22 17:23:39
原创 webpack之打包壓縮版和非壓縮版
我們知道，在開發中一般使用非壓縮版，利於調試。在生產環境中一般使用體積小的壓縮版，有利於提升加載速度。 下面我們就來看一下如何在webpack中對一份文件打包出壓縮版和非壓縮版 1.安裝插件： cnpm i terser-webpack
2020-02-22 17:23:39
原创 TypeScript中的函數
定義函數的四種方式： // 1.用function來定義函數（返回值的number可以省略，這是由於ts的類型推斷） function add1(x:number,y:number):number{ return x+y; }
2020-02-22 17:23:39