[TOC]
>[success] # webpack.config.js 配置
* 結構目錄
~~~
.
├── dist // 打包后的文件
├── src // 源碼文件
| ├── css
| └── js
| └── index.html
| └── main.js // 這是 main.js 是我們項目的JS入口文件
├── package.json // npm init 生成的NPM包的所有相關信息,其中sprict可以腳本
├── .babelrc //將高級語法轉換成低級語法
└── webpack.config.js // 配置webpack的配置文件
~~~
>[danger] ##### 配置打包的文件的出入口
~~~
1.在上篇文章中使用的是webpack ./src/main.js -o ./dist/bundle.js,命令進行的打
包,因此使用配置文件后,可以在配置文件直接配置好打包
2.打包主要需要一個入口文件,和一個生成文件因此在配置文件中也要做到這兩點
~~~
* webpack.config.js 配置出入口
~~~
1.需要導入一個路徑包,一個webpack包
2.還需要使用 module.exports 將整個文件暴露出去
3.配置入口文件entry,和出口文件 output.
4.這次打包就不用輸入那么長的指令,只需要在控制臺輸入webpack 即可
~~~
~~~
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:path.join(__dirname,'/src/main.js') , // 入口,表示,要使用 webpack 打包哪個文件
output: { // 輸出文件相關的配置
path: path.join(__dirname, '/dist'), // 指定 打包好的文件,輸出到哪個目錄中去
filename: 'bundle.js' // 這是指定 輸出的文件的名稱
},
}
~~~
* 配置webpack.config.json 打包
~~~
1.直接在控制臺輸入webpack 即可
~~~
* 執行順序
~~~
1. 首先,webpack 發現,我們并沒有通過命令的形式,給它指定入口和出口
2. webpack 就會去 項目的 根目錄中,查找一個叫做 `webpack.config.js` 的配置文件
3. 當找到配置文件后,webpack 會去解析執行這個 配置文件,當解析執行完配置文件后,就得到了 配置文件中,導出的配置對象
4. 當 webpack 拿到 配置對象后,就拿到了 配置對象中,指定的 入口 和 出口,然后進行打包構建;
~~~
>[danger] ##### 構建一個實時打包 -- webpack-dev-server
~~~
1.每一次代碼更給都要進行一次編譯,因此有了webpack-dev-server 實時打包
2.你啟動webpack-dev-server后,你在目標文件夾中,也就是這個項目中dist文件
夾,是看不到編譯后的文件的,實時編譯后的文件都保存到了內存當中。因此使用
webpack-dev-server進行開發的時候都看不到編譯后的文件.
~~~
* 安裝
~~~
1.npm i webpack-dev-server --save-dev
~~~
* 配置啟動
~~~
1.第一種,在webpack.config.js中配置了對應的devServer,然后再在
packjson.json做下面操作即可,這個配置可以快速啟動webpack-dev-server
指令,具體在webpack.config.js配置見下文
"scripts": {
"dev": "webpack-dev-server"
},
2.輸入npm run dev 執行webpack-dev-server( 見圖具體分析),生成的文件是在內存中的,在整個項目的根目錄中
3.如果沒有在'webpack.config.js' 里進行配置可以直接在' packjson.json'配置
如下:
"scripts": {
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
},
open // 自動打開瀏覽器
port: 3000, // 設置啟動時候的運行端口
contentBase: 'src', // 指定托管的根目錄
hot: true // 啟用熱更新 可以頁面無刷新自動更新更改的代碼
~~~
* 第二條

* 為什么放在內存中:
~~~
1.由于需要實時打包編譯,所以放在內存中速度會非常快
~~~
* webpack.config.js 配置
~~~
const path = require('path');
const webpack = require('webpack'); // 啟用熱更新的 第2步
module.exports = {
entry:path.join(__dirname,'/src/main.js') , // 入口,表示,要使用 webpack 打包哪個文件
output: { // 輸出文件相關的配置
path: path.join(__dirname, '/dist'), // 指定 打包好的文件,輸出到哪個目錄中去
filename: 'bundle.js' // 這是指定 輸出的文件的名稱
},
devServer: {
open: true, // 自動打開瀏覽器
port: 3000, // 設置啟動時候的運行端口
contentBase: 'src', // 指定托管的根目錄
hot: true // 啟用熱更新 的 第1步
},
plugins: [ // 配置插件的節點
new webpack.HotModuleReplacementPlugin(), // new 一個熱更新的 模塊對象, 這是 啟用熱更新的第 3 步
//具體為什么怎么做以及配置信息見下文
],
}
~~~
>[danger] ##### 對html配置 -- html-webpack-plugin
~~~
1. 自動在內存中根據指定頁面生成一個內存的頁面
2. 自動,把打包好的 bundle.js 追加到頁面中去,簡單的說會幫我們將html 和js自
動做匹配
~~~
* 安裝
~~~
1.npm i html-webpack-plugin --save-dev
~~~
* 配置啟動
~~~
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new webpack.HotModuleReplacementPlugin(), // new 一個熱更新的 模塊對象, 這是 啟用熱更新的第 3 步
new htmlWebpackPlugin({ // 創建一個 在內存中 生成 HTML 頁面的插件
template: path.join(__dirname, './src/index.html'), // 指定 模板頁面,將來會根據指定的頁面路徑,去生成內存中的 頁面
filename: 'index.html' // 指定生成在內存的頁面的名稱
})
],
~~~
* 圖解

>[danger] ##### css配置 -- loader
* loader 作用
~~~
1.webpack, 默認只能打包處理 JS 類型的文件,無法處理 其它的非 JS 類型的文件;
2.如果要處理 非JS類型的文件,我們需要手動安裝一些 合適 第三方 loader 加載器;
~~~
* 安裝
~~~
1.npm i style-loader css-loader --save-dev // 安裝處理style 和css
2.npm i less-loader less -D // 安裝處理less
3.npm i sass-loader node-sass --save-dev // 安裝處理 sass
~~~
* 配置
~~~
1.打開 webpack.config.js 這個配置文件,在 里面,新增一個 配置節點,叫做
module, 它是一個對象;在 這個 module 對象身上,有個 rules 屬性,這個 rules
屬性是個 數組;這個數組中,存放了,所有第三方文件的 匹配和 處理規則;
~~~
~~~
module: { // 這個節點,用于配置 所有 第三方模塊 加載器
rules: [ // 所有第三方模塊的 匹配規則
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置處理 .css 文件的第三方loader 規則
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置處理 .less 文件的第三方 loader 規則
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置處理 .scss 文件的 第三方 loader 規則
]
}
~~~
* 在當前文件目錄main.js 導入css
~~~
import $ from 'jquery'
// 導入css
文件下的index.css 文件
import './css/index.css'
$(function () {
$('li:odd').css('backgroundColor', 'red');
$('li:even').css('backgroundColor', function () {
return '#' + 'D97634'
})
});
~~~
* 打包后會在頁面生成內部樣式

* loader 執行順序
~~~
1. 發現這個 要處理的文件不是JS文件,然后就去 配置文件中,查找有沒有對應的第三方 loader 規則
2. 如果能找webpack.config.js對應的module里面的規則, 就會調用 對應的
loader 處理 這種文件類型;
3. 在調用loader 的時候,是從后往前調用的;例如['style-loader', 'css-loader'] 先
執行css-loader,在執行style-loader
4. 當最后的一個 loader 調用完畢,會把 處理的結果,直接交給 webpack 進行 打包合并,最終輸出到 bundle.js 中去
~~~
>[danger] ##### css -- background中的url
* 安裝
~~~
1.npm install url-loader file-loader --save-dev
~~~
* 配置
~~~
1.打開 webpack.config.js 這個配置文件,在 里面,新增一個 配置節點,叫做
module, 它是一個對象;在 這個 module 對象身上,有個 rules 屬性,這個 rules
屬性是個 數組;這個數組中,存放了,所有第三方文件的 匹配和 處理規則;
2.limit 給定的值,是圖片的大小,單位是 byte
3.如果我們引用的 圖片,大于或等于給定的 limit值,則不會被轉為base64格式的字符串, 如果 圖片小于給定的 limit 值,則會被轉為 base64的字符串
4.如果不指定圖片名字,圖片名字會自動轉換成hase,是為了防止重名
[name].[ext],[name]的含義是保持圖片原來名稱,[ext]保持原來圖片后綴
5.這里的[hash:8] 截取哈希值前八位為了防止重名
~~~
~~~
module: { // 配置所有第三方loader 模塊的
rules: [
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }
]
}
~~~
* 具體案例就是在css 的background中使用了url
~~~
.box2{
width: 220px;
height: 120px;
background: url('../images2/使用了圖片.jpg');
background-size: cover;
}
~~~

>[danger] ##### css -- 處理字體圖標
* 安裝
~~~
1.npm install url-loader file-loader --save-dev
~~~
* 配置
~~~
1.打開 webpack.config.js 這個配置文件,在 里面,新增一個 配置節點,叫做
module, 它是一個對象;在 這個 module 對象身上,有個 rules 屬性,這個 rules
屬性是個 數組;這個數組中,存放了,所有第三方文件的 匹配和 處理規則;
2.配置文字的和圖片的用的是一個loader 但是配置的時候建議分開配置
~~~
~~~
module: { // 配置所有第三方loader 模塊的
rules: [
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader
]
}
~~~
* 通過npm 安裝引入的css 文件
~~~
1.上面的字體以bootstrap 為例,當我們通過nmp 下載了bootstrap時候,
如果直接 import bootstrap from 'bootstrap' 引入的是js文件
2.但我們想引入css 文件要做的,首先所有的nmp 下載的包都在
node_modules文件中 ,因此bootstrap 的css 文件也其中,我們只需要去指定具體的css 目錄即可
3.如果要通過路徑的形式,去引入 node_modules 中相關的文件,可以直接
省略 路徑前面的 node_modules 這一層目錄,直接寫 包的名稱,然后后面
跟上具體的文件路徑
4.不寫 node_modules 這一層目錄 ,默認 就會去 node_modules 中查找
~~~
* 在main.js 導入的寫法
~~~
import 'bootstrap/dist/css/bootstrap.css'
~~~
>[danger] ##### 把js 高級語法es6 轉成低級語法
~~~
1. 在 webpack 中,默認只能處理 一部分 ES6 的新語法,一些更高級的ES6語法
或者 ES7 語法,webpack 是處理不了的;這時候,就需要 借助于第三方的
loader,來幫助webpack 處理這些高級的語法,當第三方loader 把 高級語法轉為
低級的語法之后,會把結果交給 webpack 去打包到 bundle.js 中
2.通過 Babel ,可以幫我們將 高級的語法轉換為 低級的語法
3.目前,我們安裝的 babel-preset-env, 是比較新的ES語法, 之前, 我們安裝的是 babel-preset-es2015, 現在,出了一個更新的 語法插件,叫做 babel-preset-env ,它包含了 所有的 和 es***相關的語法
~~~
* 安裝
~~~
// 一下方法只支持npm install -D babel-loader@7 babel-core babel-preset-env
1.npm i babel-core babel-loader babel-plugin-transform-runtime -D
2.npm i babel-preset-env babel-preset-stage-0 -D
~~~
* webpack.config.js 配置
~~~
1. 注意: 在配置 babel 的 loader規則的時候,必須 把 node_modules 目錄,通過 exclude 選項排除掉:原因有倆:
2. 如果 不排除 node_modules, 則Babel 會把 node_modules 中所有的 第三方 JS 文件,都打包編譯,這樣,會非常消耗CPU,同時,打包速度非常慢;
3. 哪怕,最終,Babel 把 所有 node_modules 中的JS轉換完畢了,但是,項目也無法正常運行!
~~~
~~~
module: { // 配置所有第三方loader 模塊的
rules: [
{ test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ },
]
}
~~~
* 在根目錄創建.babelrc文件進行配置
~~~
1.在項目的 根目錄中,新建一個 叫做 .babelrc 的Babel 配置文件,這個配置文件,屬于JSON格式,所以,在寫 .babelrc 配置的時候,必須符合JSON語法規范: 不能寫注釋,字符串必須用雙引號
~~~
~~~
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
~~~
- HTTP -- 初始
- HTTP -- 什么是HTTP
- HTTP -- 相關技術
- HTTP -- 相關的協議
- Emmet -- 語法
- HTML -- 補充
- iframe -- 補充
- checkbox 和 radio 細節
- form -- 補充
- html -- html5
- html -- 視頻音頻
- html -- html5 data-* 全局屬性
- css -- 重學
- css -- 單位
- css 知識補充 -- 導入
- css -- 顏色補充
- css --繼承性
- css - 元素隱藏
- 標簽元素--塊/行內/行內塊
- css -- 盒子陰影 – 在線查看
- css -邊框圖形
- css -- Web字體
- css -- 精靈圖
- css -- 屬性補充
- text-align -- 內容
- line-height -- 行高
- 文字換行
- overflow-溢出
- css -- 選擇器
- css -- 偽元素
- css -- 偽類選擇器
- 設置高度寬度 和 盒子模型
- css -- 文字溢出
- css -- white-space / text-overflow
- css -- 定位
- css -- 浮動
- 浮動 -- 案例
- flex -- 布局
- flex -- 解決等距布局
- flex -- 內容居中
- flex -- 導航欄
- Grid -- 布局
- css -- transform 形變
- css -- 垂直水平居中
- css -- transition 動畫
- css -- Animation 動畫
- css -- vertical-align
- css -- 函數
- css -- 媒體查詢
- 重學案例
- 重新 -- 鼠標常見樣式
- 重學 -- 透明邊框background-clip
- 重學 -- 多重邊框box-shadow
- css -- 預處理器
- 移動端適配
- 前端結構目錄說明
- 瀏覽器 加載過程
- 回流和重繪
- 雜七雜八 -- 小工具方法
- npm包比較網站
- IP定位
- 通過useragent獲取手機品牌型號
- 自啟本地服務
- BOM -- 常用知識點記錄
- window -- 認識
- windows -- 大小滾動
- BOM -- Location
- BOM -- URLSearchParams
- BOM -- history
- BOM -- navigator 和 screen
- 前端存儲 -- Cookie、LocalStorage、IndexedDB
- DOM -- 知識總結
- DOM -- 獲取元素
- DOM -- 節點屬性
- DOM -- 元素屬性
- 獲取元素style的讀取 - getComputedStyle
- DOM -- 元素的操作
- DOM -- 元素大小和滾動
- DOM -- 小練習
- Event -- 事件
- event -- 事件對象
- event -- 案例
- event -- 做一個樹
- js -- ajax
- 封裝一個ajax
- ajax -- 文件上傳
- 倒計時搶購案例
- axios -- 封裝
- 跨域
- 前端 -- Fetch API
- js -- 基礎篇
- 數據類型
- 數據類型檢測
- 類型小知識
- 原始類型的包裝類
- 類型轉換
- delete -- 運算符
- Date -- 對象
- 函數參數傳遞
- 對象某個屬性不存時候判斷
- 操作符
- 函數變量傳值
- 訪問對象通過點和[]
- 和if等同的一些寫法
- for -- 執行順序
- JS -- 執行過程
- JS中的堆(Heap)棧(Stack)內存
- JS -- 執行上下文
- Js -- ES3 和 ES5+ 后
- let const var
- ES3 -- 案例思考
- 閉包概念
- 淺拷貝和深拷貝
- JS -- 嚴格模式
- js -- 數組篇
- Array -- 數組基礎
- Array -- 小常識檢測數組
- Array -- 小技巧將數組轉成字符串
- Array -- 自帶方法
- Array -- 數組插入總結
- Array -- every是否都符合巧用
- js--Function篇
- Function -- length 屬性
- Function -- arguments
- Function -- 也是對象
- Function -- new Function 創建方法
- Function -- 函數作為返回值
- Function -- callee
- 匿名函數
- Function -- 閉包
- 閉包內存查看
- 閉包 -- 使用的案例
- 閉包 -- 使用的案例
- 箭頭函數不適用場景
- js -- this、call、apply
- this -- 指向
- call、apply -- 講解
- 總結 -- this
- 思考題
- Object -- 數據屬性/訪問器屬性
- 新增關于對象方法
- js -- 面向對象
- 對象到底是什么
- 到底什么是js的對象
- js --prototype、__proto__與constructor 1
- JS es5繼承
- JS 中的原型繼承說明
- JS -- Object是所有類的父類
- 總結
- Object -- 函數構造函數
- Object -- 手動實現一個new
- js -- 函數式編程(目前只是了解后面需要更多時間深入)
- 了解 -- 高階函數
- 了解 -- 純函數
- 了解 -- 函數柯里化
- 柯里化 -- 知識點
- 了解 -- 函數組合
- 了解 -- 函子
- js--小知識點
- url -- 將get請求連接參數變成對象
- event -- 一個函數處理多個事件
- try -- 處理異常
- Error -- 前段報錯信息傳給后臺
- JSON -- 序列化
- return -- 返回true和false
- for -- 循環里初始化變量
- 命名 -- get和set怎么命名
- 鏈式調用
- 利用遞歸代替循環思路
- JS -- 技巧篇
- 技巧 -- 代碼規范
- 技巧 -- 惰性載入函數
- 技巧 -- 防抖函數
- 技巧 -- 節流函數
- 插入補充(防抖/節流)
- 技巧 -- 定時器的使用
- 技巧 -- 回調函數
- 技巧 -- 分時函數
- 技巧 -- 除了return 我怎么跳出多層循環
- 技巧 -- switch 還是 if-else?
- 技巧 -- 將字符串轉成對象
- 技巧 -- 函數轉換
- 技巧 -- 工作記錄數組對象中相同項
- JS -- 數組小文章總結
- 數組類型判斷
- includes 和 indexOf
- for ... in,for ... of和forEach之間有什么區別
- map、filter、reduce、find 四種方法
- 多種形式處理數組思考方式
- for...in 和 Object.keys
- 各種知識點集合文章
- 創建數組 -- 總結
- 數組去重 -- 總結
- 獲取數組中不重復的元素 -- 總結
- 比較兩個數組元素相同 -- 總結
- 出現頻率最高的元素 -- 總結
- 兩數組交集 -- 總結
- 兩數組差集 -- 總結
- 工具方法 - 總結
- 扁平化數組
- JS -- 數組技巧篇 30s
- 30s Array -- 創建數組篇(一)
- 30s Array --過濾(查詢)篇章(一)
- 30s Array --過濾篇章(二)
- 30s Array -- 新增篇(一)
- 30s Array--比較篇(一)
- 30s Array -- 分組篇(一)
- 30 Array -- 刪除篇(一)
- 30s Array-- 其他篇(一)
- 30s Array -- 個人感覺不常用篇章
- JS -- 對象技巧篇30s
- 30s Object -- 查(一)
- 30s Object -- 增(一)
- 30s Object -- 工具類型小方法
- 30s Object -- 跳過沒看系列
- ES -- 新特性
- 變量篇章
- 變量 -- let/const/var聲明
- 變量 -- 詞法聲明和變量聲明
- 變量 -- var x = y = 100
- 變量 -- a.x = a = {n:2}
- 帶標簽的模板字符串
- 函數篇章
- 函數 -- 參數篇章
- 函數 -- 只能通過new創建實例
- 函數 -- 箭頭函數
- 函數 -- 尾調優化
- 對象篇章
- 對象 -- 字面量寫法的優化/新增方法
- 賦值篇章
- 解構賦值 -- 簡單概念
- 解構賦值 -- 對象解構
- 解構賦值 -- 數組解構
- 解構賦值 -- 函數參數
- Symbol 屬性
- Set 和 Map
- Set -- 去重/交、并、差集
- Map -- 集合
- 類class篇章
- ES6 和 ES5 的寫法比較
- es6 -- mixin函數繼承
- es6 -- 創建一個接口
- ES5 VS ES6 -- class 編譯
- 數組新功能
- 創建/轉換 -- 數組
- 迭代器和生成器
- es6 -- 迭代器
- es6 -- 生成器
- for-of 循環的是什么
- 做一個異步執行器
- 代理和反射
- Proxy -- 使用
- Reflect -- 使用
- Proxy 和 Reflect 結合使用
- 運算符 -- 展開運算符
- ES7 -- 新特性
- ES8 -- 新特性
- ES9 -- 新特性
- ES10 -- 新特性
- ES11 -- 新特性
- ES12 -- 新特性
- ES13 -- 新特性
- ES6 和 ES8 的異步
- js -- 異步、同步、阻塞、非阻塞
- js -- 如何做到異步的
- js -- 引擎線程,GUI渲染線程,瀏覽器事件觸發線程
- js -- 如何通過事件循環運行異步
- js -- 誤區任務回調就是異步
- js -- 宏任務和微任務
- 參考文章推薦閱讀
- js -- callback 還是 promise
- js -- Promise 初識
- js -- 自己實現一個Promise
- js -- Promise 更多用法
- 再來看setTimeout 和for
- js -- ES8 異步 async await
- js -- 紅綠燈問題
- js -- 倒計時
- 異步圖片預加載
- 手動觸發異步
- 異步題
- JS -- 模塊化
- CommonJS -- 在node服務器端
- AMD 模塊化規范
- ES Modules
- ES Modules -- 使用特點
- import 和 export 使用
- export 和 import -- 執行
- 其他用法
- systemjs
- 對比區別
- 使用babel 或webpack進行模塊打包
- Jq -- 細節
- JS -- 性能優化
- 圖片預加載
- js -- 正則
- 設計原則和編程技巧
- 設計原則 -- 單一職責
- js -- 設計模式
- 設計模式 -- 簡單理解
- 一、鴨子類型
- 1.1 多態概念
- 1.2 小章節記錄 -- 封裝
- 1.3.多態和鴨子
- 設計模式 -- 單例模式(透明、惰性)
- 單例模式 -- js單例和惰性單例
- ES6 -- 寫單例模式
- 設計模式 -- 策略模式
- 策略模式 -- 表單驗證
- 策略模式 -- 表單驗證多規則
- 策略模式和多態區別
- 設計模式 -- 代理模式(代理被代理相同方法)
- 代理模式 -- 分類
- 代理模式 -- 總結
- 設計模式 -- 迭代器模式
- 設計模式 -- 觀察者(發布訂閱)模式
- 觀察者 和 發布訂閱區別
- 發布訂閱模式 -- 現在通用模型
- 發布訂閱模式 -- 書中實際案例
- 發布訂閱模式--全局發布訂閱對象
- 發布訂閱模式 -- vue
- 設計模式 -- 命令模式(對象方法拆分指令)
- 命令模式 -- js 自帶
- 命令模式 -- 撤銷和重做
- 命令模式 -- 命令和策略的區別
- 設計模式 -- 組合模式(樹)
- 組合模式 -- 拆分了解
- 組合模式 -- java角度
- 組合模式 -- 書中案例掃描文件夾
- 組合模式 -- 注意點
- 組合模式 -- 引用父對象(書中案例)
- 組合模式 -- 小的案例
- 組合模式 -- 總結
- 設計模式 -- 模板方法(抽象類繼承)
- 模板方法 -- 前端角度思考
- 模板方法 -- java 思考方式
- 模板方法 -- js沒有抽象類
- 模板方法 -- 鉤子方法
- 模板方法 -- 用js方式來實現
- 設計模式 -- 享元模式
- 享元、單例、對象池
- 享元模式 -- 前端角度思考
- 享元模式 -- 代碼案例
- 享元模式 -- 適用和內外部狀態
- 額外擴展 -- 對象池
- 設計模式 -- 職責鏈模式
- 職責鏈 -- 前端角度
- 職責鏈和策略
- 職責鏈 -- 異步的職責鏈
- 職責鏈 -- AOP
- 職責鏈 -- 改造迭代器模式的代碼
- 設計模式 -- 中介者模式
- 中介者模式 -- 前端角度(一)
- 中介者模式 -- 前端角度(二)
- 中介者模式 -- 前端角度(三)
- 中介者模式 -- 總結
- 設計模式 -- 裝飾者模式
- 裝飾者模式 -- es5 解決方案
- 裝飾器模式 -- 和代理模式區別
- 設計模式 -- 狀態模式
- 狀態模式 -- 前端思想
- 狀態模式 -- 文件上傳案例
- 狀態模式 -- 和策略模式的區別
- 設計模式 -- 適配器模式
- js -- 代碼重構
- 重構 -- 方法封裝
- 重構 -- 抽象函數
- 高階函數 -- 范式
- 狀態管理方案
- Node -- 學習篇
- Node -- 服務端運行的js
- node -- Global(全局成員)
- node -- Buffer緩沖器
- node -- 路徑操作
- node -- 文件的讀寫
- node -- 目錄操作
- node -- HTTP
- HTTP -- 響應頭常見類型
- HTTP -- 處理Get
- HTTP -- 處理Post
- HTTP -- 簡單的案例
- Express
- Express -- 中間件
- Express -- 處理post/get
- Express -- 模板引擎
- Express -- 簡單案例和目錄搭建
- Express -- 數據庫service.js
- Express -- json/url
- Express -- 配合數據庫
- 配合數據庫 -- 簡單的登錄
- npm -- js包管理
- npm -- 淘寶鏡像
- nrm -- 更多鏡像的選擇
- yarn -- 包管理
- yarn -- 清理緩存
- WebPack -- 模塊化開發
- webPack -- 安裝、使用、打包
- webPack -- 使用配置文件
- 延伸 -- base64圖片優劣
- webPack -- 完整配置