webpack是什么
是一個模塊打包器
模塊化歷史
- CommonJS
//moduleA.js
exports.a = 1
//moduleB.js
var moduleA = require('./moduleA')
- AMD
// moduleA.js
define (function(){
return {
name: A
}
})
// moduleB.js
require(['./moduleA'], function(moduleA){
console.log(moduleA.name)
})
- ES6 Modules
//moduleA.js
let name = 'A'
let age = 18
export name
export age
//ES6中，export和import是關鍵字，使用這兩個可以輸出和引入模塊
// moduleB.js
import name from './moduleA'
console.log(name)
Get started
- webpack默認支持CommonJS、AMD拾碌、ES Modules
webpack.config.js學習
config.js是node的文件，瀏覽器是看不到的漆枚，只有開發(fā)者看得到
-
配置文件的寫法
webpack.config.js
說明：有了配置文件盔夜，就可以直接運行webpack鲁沥，然后根據你配置的入口和輸出位置來進行文件的打包荠锭，就不用像前面那樣寫一長串的命令行來指定要打包的文件旱眯，和輸出的位置。
-
運行配置文件
修改scripts實現效果
說明：這里只寫webpack就能實現效果是因為有兩個默認：1. 輸入webpack证九，node會默認在當前目錄的node_modules下尋找webpack工具包删豺。 2. webpack會默認在當前目錄下尋找webpack.config.js來作為它的配置文件。 因為有這兩個默認的存在愧怜，可以直接通過webpack命令實現效果呀页。
-
引入變量
引入其他模塊的變量 在ES6中，如果對象中的變量為name:name拥坛，那么可以直接寫name作為對象中的變量
加載css
-
直接在文件中引入css文件
加載css
結果報錯
報錯
原因：webpack不知道如何處理css -
通過加載loaders來加載css的處理模塊
image.png -
為什么js可以加載css
image.png -
webpack使用autoprefixer-loader
加前綴
加載圖片
1.配置圖片處理loaders
2.缺少模塊蓬蝶，進行安裝
3.安裝缺少的模塊后尘分，繼續(xù)build，產生圖片
壓縮圖片
-
配置壓縮工具
配置壓縮工具 -
壓縮完成后
image.png
大小對比
webpack --watch
-
作用：使用watch后丸氛，會監(jiān)視文件是否發(fā)生改動音诫，每次發(fā)生改動，都會自動build一次雪位，就不用自己輸代碼了
windows中的寫法
在scripts中配置命令方便使用
配置scripts
webpack 引用scss文件
-
引入scss文件
引入scss文件 -
通過搜索loaders找到使用方法，在配置文件中寫好loaders
使用方法
config配置 -
安裝loader
安裝loader -
執(zhí)行build
build
提示缺少模塊
提示缺少模塊 安裝node sass
node sass是ruby社區(qū)發(fā)明的梨撞，但是node并沒有完全重寫這個模塊雹洗，所以安裝時有些注意事項
- 直接安裝，開始前面的部分都正常卧波，但最后有個地方有個文件的下載需要指定位置
前面
指定文件位置
git bash中運行這一行代碼指定下載位置export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"时肿，然后再進行npm install node-sass來安裝模塊才能成功
- less的loader的安裝方法相同，有了這些后港粱，甚至可以在項目中實現less和sass的混寫
webpack Dev Server（自動刷新工具）
webpack-dev-server如果是3.x的話螃成，webpack必須是4.x才不會報此TypeError: Cannot read property 'compile' of undefined錯誤, 同理如果webpack是3.x，則webpack-dev-server必須是2.x
安裝
npm install webpack-dev-server --save-dev-
運行webpack dev server
出現提示查坪，項目在localhost8080下運行寸宏，此時打開這個地址，就能預覽頁面
文件目錄結構
運行
看看根目錄下都有啥
查看請求
請求
修改css偿曙，查看是否能自動刷新并查看效果
出現問題 解決前面出現的不能刷新效果的問題
原因：首先氮凝，原因是我們訪問的是dist目錄，而其中的index.html引用的是dist目錄下的bundle.js望忆，這個文件是死的罩阵，也就是我們在修改css文件后，這個js文件是沒有被重新build的启摄，而根目錄（也就是localhost：8080下）下的bundle.js是動態(tài)的稿壁，是活的，所以我們要引用這個js-
引用根目錄下的bundle.js
下圖這種寫法是在引用dist目錄下的bundle.js歉备，這個文件是死的傅是。為什么呢？其實現在8080根目錄下和dist目錄下都有bundle.js威创，但是dist下的那個是死的落午，8080下這個是動態(tài)的，因為devserver會默認將你所有的靜態(tài)資源都能在8080下訪問到肚豺，只有一個bundle.js是動態(tài)的
原來的寫法
下圖這種寫法在引用8080根目錄下的bundle.js
修改代碼
效果 -
引用dist目錄下的bundle.js
dist目錄下的bundle.js
總結：webpack-dev-server其實是會默認將當前目錄的所有靜態(tài)文件放到localhost下溃斋，但只有一個文件是動態(tài)的，就是默認的根目錄下的bundle.js吸申，所以需要引用localhost下的bundle.js梗劫，但是我們可以通過配置來實現依賴那個js文件
-
沒有指定入口文件享甸，需要自己點選
點選入口文件 -
自己配置入口
語法
配置文件中的寫法和位置
配置文件詳情
效果
這時修改文件后的自動刷新可以看見效果
webpack插件學習
自動生成HTML插件
-
步驟
1.先在配置文件中引入兩個插件
配置
2.git安裝兩個插件
安裝插件
3.語法
語法
配置文件中的具體寫法
4.刪除dist中的index.html
刪除文件
5.啟動webpack-dev-server
啟動
注意，這里使用了一個打開網頁的插件梳侨，url的端口號要和dev-server配置的端口號一樣
端口號統(tǒng)一
5.效果
執(zhí)行webpack-dev-server后蛉威，會自動新建一個服務器，然后編譯代碼走哺，然后打開網頁
效果 -
沒有index.html蚯嫌，哪來的網頁？
網頁代碼
功勞其實來自剛剛的兩個插件
插件功能解釋
webpack代碼部署丙躏、發(fā)布
依賴的命令行
webpack -p-
步驟
1.運行webpack -p择示，生成html和js文件
image.png
2.git push上傳代碼
image.png
3.github上開啟預覽頁面，實現預覽 -
發(fā)布后效果
效果
代碼體積大大減小
代碼體積減小
幾個補充
-
回到最開始晒旅，webpack其實就是個打包器栅盲，就像剛剛上面所實現的，將所有東西废恋，圖片谈秫、js、css鱼鼓、html都打包成一個bundle.js拟烫，然后這些東西通過一個文件放到頁面上。還有另一個概念蚓哩，就是為模塊化而生的打包器构灸，就像我們剛剛生成的bundle，就是一個模塊岸梨，它內部有自己的邏輯喜颁，也就是各個文件之間的邏輯，不受別人影響曹阔，也不影響別人半开，就是一個獨立的模塊，這樣就讓我們的代碼條理清晰赃份，不會出現寫一個1000代碼的js寂拆，而是10個100行代碼的js。
為模塊化而生的打包器 -
bundle.js有問題
這時的bundle.js還是從緩存中獲取的抓韩，如果我們升級了呢纠永？那用戶還是用的舊的，所以應該加個哈希谒拴，讓用戶能保持最新的代碼來使用
bundle.js問題
添加步驟
1.在配置文件中輸出的bundle.js后加上-[hash]
2.執(zhí)行webpack -p尝江，發(fā)現bundle.js多了哈希
3.修改文件，重新壓縮英上，bundle.js的哈希也會發(fā)生變化
這樣一來炭序，用戶既能快速訪問舊的功能啤覆，但同時又能保持新的功能的更新
-
為什么要自動生成html
因為html引用的js是最新build的，如果自己維護惭聂，根本不知道哈希已經變成什么了
image.png 如果想在自動成的html中加東西怎么辦窗声？例如，我想加個meta辜纲，這個是有選項的笨觅，可查閱文檔實現
