前言
初衷： 本文我們講一下Webpack嫡良，說(shuō)說(shuō)它能干什么及為什么要使用它。把我整理的筆記分享給大家寝受，如有錯(cuò)誤請(qǐng)各位指出，不喜勿噴很澄。
適合人群： 前端初級(jí)開(kāi)發(fā)，大佬繞道甩苛。
本文講解是Webpack4.x，注意版本讯蒲。
為什么要使用Webpack
在之前我們都是用傳統(tǒng)的方式去開(kāi)發(fā)一個(gè)系統(tǒng)，html爱葵、css、js萌丈，就這些赞哗。開(kāi)發(fā)完之后直接給后臺(tái)人員去部署，當(dāng)然這沒(méi)什么問(wèn)題辆雾。當(dāng)我們的項(xiàng)目需求不斷增加肪笋，代碼也就越多，越不好維護(hù)度迂，一個(gè)文件代碼都上百甚至上千行藤乙，里面代碼甚至都是重復(fù)的,還需要擔(dān)心script標(biāo)簽依賴順序問(wèn)題，還需要擔(dān)心代碼變量污染問(wèn)題惭墓，這時(shí)就出來(lái)了模塊化坛梁，防止變量污染及依賴順序問(wèn)題，而現(xiàn)在主流打包工具就是Webpack腊凶，強(qiáng)大的社區(qū)支撐且支持Es Module划咐、CommonJs拴念、AMD規(guī)范。
什么是Webpack
Webpack是一個(gè)模塊打包工具褐缠，可以將Es Module政鼠、CommonJs的語(yǔ)法處理成瀏覽器可以運(yùn)行的代碼，把文件相關(guān)聯(lián)的依賴打包成一個(gè)js文件队魏。
Webpack能干什么
利于我們便捷開(kāi)發(fā)公般，幫助我們?cè)诒镜卮罱ㄒ粋€(gè)服務(wù)，代碼變動(dòng)熱更新及不刷新頁(yè)面胡桨，全局注入依賴文件官帘，代碼分割，代碼提取登失，去除不必要的代碼遏佣，區(qū)分環(huán)境變量挖炬，圖片優(yōu)化等揽浙，社區(qū)強(qiáng)大的插件擴(kuò)展，幫助我們項(xiàng)目便捷開(kāi)發(fā)意敛。
安裝
安裝Webpack環(huán)境也非常的簡(jiǎn)單馅巷，一般情況下建議本地安裝，全局安裝可能會(huì)跟別的項(xiàng)目起沖突草姻，盡量本地安裝钓猬。
cnpm i webpack@4 webpack-cli --save
上面安裝的webpack是語(yǔ)法，webpack-cli是命令行操作的執(zhí)行命令
安裝完之后撩独，不能直接webpack -v這樣會(huì)報(bào)錯(cuò)敞曹， 因?yàn)樗鼤?huì)去全局找你的webpack環(huán)境，但你現(xiàn)在是本地安裝澳迫，使用npx webpack -v這樣會(huì)在你項(xiàng)目進(jìn)行本地查找剧劝。
快速上手
初始化package.json文件
在你的項(xiàng)目文件下執(zhí)行該命令讥此，進(jìn)行對(duì)應(yīng)填寫(一路回車也可以)萄喳，傻瓜式操作。
npm init
項(xiàng)目結(jié)構(gòu)
|- /node_modules
|- /src
|- index.js
|- news.js
|- index.css
|- index.html
|- webpack.config.js
|- package.json
Entry
entry打包入口文件展哭，打包入口有好幾種形式匪傍，下面我們來(lái)一一介紹它們。
單入口
module.exports = {
entry: "./src/index.js"
}
多入口
多入口打包茵休，js文件名稱則是對(duì)象的key值榕莺。
module.exports = {
entry: {
index: "./src/index.js",
news: "./src/news.js"
}
}
數(shù)組入口
數(shù)組打包棵介，entry接收一個(gè)數(shù)組對(duì)象，里面參數(shù)只有最后一個(gè)值才是真正的打包路徑唠雕，其它參數(shù)都是將本路徑文件導(dǎo)入到最后一個(gè)參數(shù)里面
module.exports = {
entry: ["./src/news.js", "./src/index.js"]
}
// 上面entry那種操作岩睁，等同于如下：
// index.js
require("news.js")
上面example中揣云，除了最后一個(gè)參數(shù)邓夕，將其它數(shù)組參數(shù)都導(dǎo)入到最后一個(gè)參數(shù)文件內(nèi)
Output
output有入口文件就得有出口文件，
module.exports = {
output: {
path: __dirname + "/dist",
filname: "app.js"
}
}
filename有幾個(gè)名稱選項(xiàng)点弯，我來(lái)看介紹一下
- [name] 使用入口文件名稱
- [chunkhash] 生成hash值蒲拉，是通過(guò)當(dāng)前文件所依賴的進(jìn)行解析雌团，最后生一個(gè)chunk士聪，在生成hash值
- [contenthash] 當(dāng)文件內(nèi)容改變值剥悟，hash值才會(huì)改變
- [id] 使用chunk id生成文件名
- [hash] 使用hash作為文件名稱曼库，每次生成的hash都不一樣
module.exports = {
output: {
path: __dirname + "/dist",
filname: "[name][id][contenthash].js"
}
}
Loader
loader是什么毁枯，以上我們只說(shuō)了js相關(guān)的种玛，Webpack默認(rèn)只認(rèn)識(shí)js文件赂韵，那么Webpack怎么打包js之外的東西呢祭示，打包js之外的就會(huì)報(bào)錯(cuò)谴古，這怎么辦呢，這時(shí)候使用loader蹂窖，loader是一個(gè)轉(zhuǎn)換器，我們下面以css文件為例子講解
- test 接收一個(gè)正則表達(dá)式横媚，匹配文件后綴名稱，匹配成功進(jìn)入該loader執(zhí)行
- use 接收一個(gè)數(shù)組恢口，當(dāng)只有一個(gè)loader可以寫成一個(gè)字符串
css-loader
安裝
npm i css-loader --save-dev
使用
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["css-loader"] or "css-loader"
}
]
}
}
配置完該loader不會(huì)報(bào)錯(cuò)了耕肩，但是代碼還是不生效猿诸。只是解析了css文件梳虽，并沒(méi)有將style掛載到頁(yè)面上窜觉，需要結(jié)合style-loader。
style-loader
安裝
npm i style-loader --save-dev
使用
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
}
]
}
}
上面example中旬陡，loader必須有順序執(zhí)行季惩，loader是從后往前執(zhí)行的腻格，先解析css文件，然后將解析完的css文件掛載到頁(yè)面style標(biāo)簽上青抛，這時(shí)在看代碼就會(huì)生效酬核。
Plugins
clean-webpack-plugin
這時(shí)如果我們把output里面的filename修改之后蜜另，再次打包举瑰，可以看到之前的dist包里面的舊代碼還依然存在，這時(shí)我們想每次打包都生成一個(gè)新的dist目錄旧巾，這時(shí)就需要用到插件了。
安裝clean-webpack-plugin插件, 我本地安裝是3.0.0的版本
npm i clean-wenpack-plugin --save-dev
使用
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
html-webpack-plugin
我們打包完dist目錄下沒(méi)有坎怪，index.html文件搅窿，那么我們可以使用該插件，在每次打包時(shí)都會(huì)生成一個(gè)html文件男应，下面我們來(lái)安裝一下
安裝html-webpack-plugin我這里使用的是3.2.0版本殉了，需要注意的是薪铜，你本地的node版本越高，安裝的插件越新谓娃，可能新版本會(huì)跟webpack4有點(diǎn)不兼容甚至導(dǎo)致代碼報(bào)錯(cuò)滨达。
npm i html-webpack-plugin@3.2.0 --save-dev
使用
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 以咱們本地的index.html文件為基礎(chǔ)模板
filename: "index.html", // 輸出到dist目錄下的文件名稱
}),
]
}
html-webpack-plugin插件接收一個(gè)對(duì)象，這個(gè)對(duì)象有一些屬性值竹握，這里咱就不一一舉例了啦辐，可以看這篇文章《html-webpack-plugin用法全解》。
完整代碼
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname + "/dist",
filename: "index.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html',
filename: "index.html",
}),
]
}
總結(jié)
到這里我們的webpack入門就講完了，實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的打包侥衬，webpack默認(rèn)只認(rèn)識(shí)js文件浇冰，要想使用css及圖片聋亡，可以使用loader進(jìn)行轉(zhuǎn)換坡倔∽锼可以看到最后打包完，dist目錄下還是一些原來(lái)的文件html瘩缆、css庸娱、js熟尉，直接把dist包給后臺(tái)部署就行斤儿。
更多常用的loader之常用plugin下期分享，記得關(guān)注我喲???疆液。
感謝
謝謝你讀完本篇文章，希望對(duì)你能有所幫助飘蚯，如有問(wèn)題歡迎各位指正局骤。
我是蛙人(????)峦甩，如果覺(jué)得寫得可以的話，請(qǐng)點(diǎn)個(gè)贊吧?凯傲。
感興趣的小伙伴可以加入 [ 前端娛樂(lè)圈交流群 ] 歡迎大家一起來(lái)交流討論
寫作不易犬辰，「點(diǎn)贊」+「在看」+「轉(zhuǎn)發(fā)」 謝謝支持?
往期好文
《聊聊在Vue項(xiàng)目中使用Decorator裝飾器》
《聊聊什么是CommonJs和Es Module及它們的區(qū)別》
《帶你輕松理解數(shù)據(jù)結(jié)構(gòu)之Map》
