介紹
webpack是一個前端的靜態資源打包工具,能讓瀏覽器也支持模塊化。它將根據模塊的依賴關係 進行靜態分析,然後將這些模塊按照指定的規則生成對應的靜態資源。
官網:https://webpack.docschina.org/
webpack的作用有下面幾點:
webpack核心主要進行javascript資源打包。
- 它結合其他工具, 將多種靜態資源css、png、sass分類轉換成一個個靜態文件,這樣可以減少頁面的請求。
- 可集成babel工具實現EcmaScript 6 轉 EcmaScript 5 ,解決兼容性問題。
- 可集成http服務器。
- 可集成模塊熱加載,當代碼改變後自動刷新瀏覽器等等功能。
安裝
全局安裝:
不推薦全局安裝webpack,全局安裝的webpack,在打包項目的時候,使用的是你安裝在自己電腦上的webpack,如果項目到了另一個人的電腦上,他可能安裝的上舊版本的webpack,那麼就可能涉及到兼容性的問題。而且他如果沒有在全局安裝webpack就無法打包。
# 安裝最新版本
npm install --global webpack
# 或者 安裝特定版本
npm install --global webpack@<version>
如果上面安裝的是 webpack v4+ 版本, 還需要安裝 CLI , 才能使用 webpack 命令行
npm install --global webpack-cli
可通過 npm root -g 查看全局安裝目錄
如果安裝後,命令行窗口 webpack 命令不可用,則手動配置 全局目錄的 環境變量
我的電腦 -> 右鍵屬性 -> 高級系統設置 -> 高級 -> 環境變量 -> 系統變量 -> path ->在末尾添加上面的路徑,記得前面用 ; 分號隔開
然後再重新打開 cmd 命令行窗口,輸入 webpack -v 即可使用
全局安裝 [email protected] 與 [email protected]
npm i -g [email protected]
npm i -g [email protected]
安裝後查看版本號。如果有紅色字提醒,沒關係忽略它
webpack -v
簡單使用
新建目錄結構如下:
在webpack-demo2目錄下執行下面代碼打包js文件
E:\vue\npm-demo\webpack-demo2>webpack ./src/main.js -o ./dist/bundle.js
./dist/bundle.js表示將所有的js文件打包在dist目錄下的bundle.js文件中,./src/main.js是所有js的入口文件
webpack.config.js
每當修改js文件內容後,都要webpack重新打包,打包時要指定入口和出口比較麻煩,可通過配置解決
在 webpack-demo2 目錄下創建 webpack.config.js 配置文件,該文件與 src 處於同級目錄
在webpack.config.js裏寫如下配置
// 引入node中的path模塊,處理文件路徑 的小工具
const path = require('path')
// 導出一個webpack具有特殊屬性配置的對象
module.exports = {
mode: 'none', // 指定模式配置:"development" | "production" | "none"
// 入口
entry: './src/main.js', // 入口模塊文件路徑
// 出口
output: {
// path: './dist/', 錯誤的,要指定絕對路徑
path: path.join(__dirname, './dist/'), //打包的結果文件生成的目錄要是絕對路徑
filename: 'bundle.js'
}
}
然後就可以執行下面的命令進行打包了,不需要再輸入入口和出口了
webpack
如果沒有mode參數,則會出現黃色警告。
本地安裝
本地安裝的時候,建議把webpack安裝到devDependencies 開發依賴 ( --save-dev ) 中,因爲 webpack 只是一個打包工具,項目如果需要上線,上線的是打包的結果,而不是這個工具。
所以我們爲了區分生產環境和開發環境依賴,通過 --save (生產環境)和 --save-dev (開發環境)來區分。
爲了測試本地安裝,先把全局安裝的 webpack 和 webpack-cli 卸載掉
npm uninstall -g webpack
npm uninstall -g webpack-cli
在webpack-demo2中,使用npm init -y 初始化,會生成一個package.json的文件,後面要用到。
本地安裝命令
# 安裝最新版本
npm install --save-dev webpack
# 安裝特定版本
npm install --save-dev webpack@<version>
如果上面安裝的是 webpack v4+ 版本, 還需要安裝 CLI , 才能使用 webpack 命令行
npm install --save-dev webpack-cli
# 1. 進入到 webpack-demo2
cd e:\vue\npm-demo\webpack-demo2
# 2. 初始化項目 `-y` 是採用默認配置
npm init -y
# 3. 安裝 v4.35.2 ,不要少了 v
npm i -D [email protected]
# 安裝 CLI
npm i -D [email protected]
安裝完執行webpack -v會報錯
在本地安裝的 webpack ,要通過在項目文件夾下 package.json 文件中的 scripts 配置命令映射
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"show": "webpack -v",
"start": "node ./src/main.js",
"build": "webpack"
},
然後查看版本號就使用下面的命令
npm run show
運行 main.js 模塊:
npm run start
注意:如果命令映射的別名是 start ,可省略 run 進行簡寫執行,即:
npm start
打包構建
npm run build
自動打包
前面我們修改了代碼之後,都要手動打包,這樣很浪費我們的時間,那我們想當我們修改了代碼之後能不能自動幫我們完成打包,答案當然是可以的,只需要在package.json的script里加上watch參數就可以了
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"show": "webpack -v",
"start": "node ./src/main.js",
"build": "webpack",
"watch": "webpack --watch" // 加上這個就可以自動幫我們打包了
},
添加上watch參數之後,在命令行執行npm run watch,程序會阻塞狀態,當我們更改代碼之後,自動會幫我們完成打包
導入導出模塊
上面我們的webpack-demo2下有個src文件夾,裏面有兩個js文件,一個是bar.js,一個是main.js。main.js是主入口,引用了bar.js文件,既然要用到bar.js裏的,那我們就要在bar.js裏導出,然後再main.js裏導入
導出默認成員
默認成員只能有一個,要不然會報錯。
export default 成員
bar.js
// ES6 注意 一個模塊文件中,只能導出一個默認成員,註釋掉一個
export default function() { // 導出函數
console.log('我是bar模塊--ES6')
}
export default { // 導出對象
name: '鄒鄒'
}
要在main.js文件裏使用bar.js文件裏的內容,還要在main.js裏導入
main.js
// Es6 導入默認成員
import bar from './bar'
bar() // 調用函數
console.log(bar)
console.log(bar.name) // 對象的屬性值
導出非默認成員
默認成員只能導出一個,非默認成員可以導出多個。
非默認成員必須要有成員名稱
bar.js
// ES6 可以導出多個非默認成員
export const x = 'xxx'
export var y = 'yyy'
export function add (a, b) {
return a+b
}
// export z = 'zzz' 錯誤的,沒有數據類型
// export 'wwww' 錯誤的,沒有變量名和類型
// export function (x, y) { 錯誤的,沒有函數名
// return x+y
// }
main.js
// Es6 導入非默認成員
// 通過 解構賦值 的方式 來加載成員
// x 對應的是bar.js 模塊中的 x 成員 ,y對應y成員,ad對應add成員 函數
import {x, y, add} from './bar'
console.log(x, y, add(10, 20))
// 通過解構賦值按需導入你需要的成員
import {x, y} from './bar'
console.log(x, y)
// 會將默認成員 與 非默認成員 全部導入
import * as bar2 from './bar'
console.log(bar2, bar2.x, bar2.y, bar2.add(1,2))