一. 概述
什么是webpack
模塊打包機(jī)：它做的事情是，分析你的項目結(jié)構(gòu)养距，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用会喝。
為什么使用webpack
現(xiàn)在是網(wǎng)絡(luò)時代舱污，在我們的生活中網(wǎng)絡(luò)成為了必不可少的蕉拢，我們在網(wǎng)絡(luò)上可以看到很多漂亮的功能豐富的頁面眯牧，這些頁面都是由復(fù)雜的JavaScript代碼和各種依賴包組合形成的，那么這些都是怎么*組合在一起的呢外恕，組合在一起需要花費(fèi)多少精力呢杆逗，經(jīng)過漫長發(fā)展時間現(xiàn)前端涌現(xiàn)出了很多實踐方法來處理復(fù)雜的工作流程，讓開發(fā)變得更加簡便鳞疲。
- 模塊化 可以使復(fù)雜的程序細(xì)化成為各個小的文件
-
預(yù)處理器 可以對Scss罪郊，less等CSS預(yù)先進(jìn)行處理
......
二. weback使用流程
1、創(chuàng)建項目
這里用的是命令創(chuàng)建項目尚洽，當(dāng)然你也可以去鼠標(biāo)右鍵創(chuàng)建項目
mkdir webpackDemo // 創(chuàng)建項目
cd webpackDemo // 進(jìn)入項目
mkdir app // 在項目中創(chuàng)建app文件
mkdir common // 在項目中創(chuàng)建common文件
cd app // 進(jìn)入app文件夾
touch app.js // 創(chuàng)建app.js文件
touch main.js // 創(chuàng)建main.js文件
cd .. //返回到webpackDemo項目根目錄
cd common // 進(jìn)入common文件
touch index.html // 創(chuàng)建index.html文件
- mkdir：創(chuàng)建文件夾
- cd ..：返回所在目錄的上級目錄
- touch：創(chuàng)建文件
- app：用來存放原始數(shù)據(jù)和我們將寫的JavaScript模塊
-
common：用來存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個
index.html文件）
目錄結(jié)構(gòu)
基礎(chǔ)代碼
index.html是主入口悔橄，需要設(shè)置根目錄并且將打包后的文件導(dǎo)入
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
app.js是我們寫的模塊,并依據(jù)CommonJS規(guī)范導(dǎo)出這個模塊,這里我們以輸出welcome to use webpack為例
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "welcome to use webpack!";
return greet;
}
main.js其實是一個組件,它的目的是將我們寫的一些代碼模塊返回并插入到頁面中
const greeter = require('./app.js');
document.querySelector("#root").appendChild(greeter());
2. 安裝
因為安裝webpack要用npm,所以安裝之前我們首先要安裝node
第一步 要在項目根目錄用npm init初始化，生成package.json文件
npm init
初始化過程中會有好多提示，如果非正式項目下可以直接回車調(diào)過癣疟，括號里的都是默認(rèn)的,正式項目下可以根據(jù)情況填寫每一步
name: (webpackDemo) // 項目名稱
version: (1.0.0) // 版本號
description: // 項目的描述
entry point: (index.js) // 入口文件
test command: // 測試命令
git repository: // git倉庫
keywords: // 關(guān)鍵字
author: // 作者創(chuàng)始人
license: (ISC) //許可:(ISC)
About to write to C:\Users\Administrator\Desktop\webpackDemo\package.json:
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) // 這里直接輸入yes就可以了
第二步 安裝webpack
npm install webpack -g // 全局安裝
npm install webpack --save-dev // 項目內(nèi)安裝
如果不想安裝最新的版本那么得在webpack后面加一個@然后在填入你要安裝的版本號挣柬，當(dāng)然安裝最新版本時可以加@版本號也可以不加@版本號
npm install webpack@xx -g
npm install webpack@xx --save-dev
webpack有兩個版本分別是webpack2和webpack4，這兩個版本安裝配置有差異睛挚。
先來看看webpack2
本次安裝的是3.5.6的版本邪蛔，運(yùn)行的是以下命令
npm install webpack@3.5 --save-dev
接下來看下我們創(chuàng)建的package.json文件,里面的都是我們剛配置的
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.5.6"
}
}
接下來看webpack4
webpack4版需要去額外安裝webpack-cli
npm install webpack@4 --save-dev
npm install webpack@4 webpack-cli --save-dev
接下來看下配置文件
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
}
}
注意：package.json文件中不能有注釋，在運(yùn)行的時候請將注釋刪除
第三步 使用Webpack打包
webpack可以在終端中使用扎狱，基本的使用方法如下：
// webpack2的命令
node_modules/.bin/webpack app/main.js common/index.js
// webpack4的命令
node_modules/.bin/webpack app/main.js -o common/index.js
- app/main.js：是入口文件的路徑侧到，本文中就是上述main.js的路徑
- common/index.js：是打包文件的存放路徑
注意：是非全局安裝情況
webpack2打包命令執(zhí)行后
webpack4打包命令執(zhí)行后
如果你的webpack是最新的版本webpack4那么就不能用webpack2的打包命令，如果用webpack2的命令會報錯打包失敗淤击，如下：
- 黃色部分：webpack4是需要指定打包為開發(fā)環(huán)境還是生產(chǎn)環(huán)境的匠抗，目前我們沒有指定是什么環(huán)境所以就會有這個警告
- 紅色部分：因為webpack4的打包命令和webpack2的打包命令不同，所以用webpack2的打包命令時就會提示打包的路徑找不到
如果你用webpack4的打包命令污抬，打包如下
黃色警告下面會解決這個問題
從打包的結(jié)果可以看出webpack同時編譯了main.js 和app,js汞贸，并且打包成功，現(xiàn)在打開編輯器壕吹，可以看到如下結(jié)果
webpack2的打包文件
webpack4的打包文件
接下來我們在看下頁面
是不是很激動我們已經(jīng)將welcome to use webpack!在頁面打包生成著蛙，但是這種方式需要在終端運(yùn)行復(fù)雜的命令而且容易出錯很不方便，如果能更方便點(diǎn)就好了耳贬，那么接下來我們在看下它的升級版打包。
第四步 通過配置文件webpack.config.js來使用webpack
Webpack擁有很多其它的比較高級的功能猎唁，這些功能其實都可以通過命令行模式實現(xiàn)咒劲，但是在終端中進(jìn)行復(fù)雜的操作，這樣不太方便且容易出錯的诫隅，更好的辦法是定義一個配置文件腐魂，這個配置文件其實也是一個簡單的JavaScript模塊，我們可以把所有的與打包相關(guān)的信息放在里面逐纬。
在當(dāng)前項目webpackDemo文件夾下新創(chuàng)建一個文件webpack.config.js,寫入簡單的配置代碼蛔屹，目前的配置主要涉及到的內(nèi)容是入口文件路徑和打包后文件的存放路徑
// webpack2的配置
module.exports = {
entry: __dirname + "/app/main.js", // 之前提到的唯一入口文件
output: {
path: __dirname + "/common", // 打包后的文件存放的地方
filename: "index.js" // 打包后輸出文件的文件名
}
}
// webpack4的配置
module.exports = {
// webpack4需要添加這個配置，development為開發(fā)環(huán)境豁生，production為生產(chǎn)環(huán)境
mode: "development",
entry: __dirname + "/app/main.js", // 之前提到的唯一入口文件
output: {
path: __dirname + "/common", // 打包后的文件存放的地方
filename: "index.js" // 打包后輸出文件的文件名
}
}
注：“__dirname”是node.js中的一個全局變量兔毒，它指向當(dāng)前執(zhí)行腳本所在的目錄。
有了這個配置之后甸箱，再打包文件育叁，只需在終端里運(yùn)行webpack(全局情況下)或node_modules/.bin/webpack(非全局安裝需使用)命令就可以了，不需要再命令行打入主入口和打包文件的路徑了芍殖，這條命令會自動引用webpack.config.js文件中的配置選項豪嗽。
示例如下：
是不是很簡單這樣我們就不用再終端輸入那么多煩人的配置文件的路徑了，那么如果node_modules/.bin/webpack這條命令都不用在終端輸入，是不是更簡單呢龟梦？隐锭，接下來接著往下看。
更加方便的打包操作
根據(jù)上面的方式來看我們只要配置了webpack.config.js就可以將打包的路徑命令省去计贰，那么我們想是否可以以這種方式將node_modules/.bin/webpack命令省去呢成榜？ 答案是可以，只不過不是在這個文件內(nèi)配置蹦玫，也不用去新建文件配置赎婚。
npm可以引導(dǎo)任務(wù)執(zhí)行，對npm進(jìn)行配置后可以在命令行中使用簡單的npm start命令來替代上面略微繁瑣的命令樱溉。在package.json中對scripts對象進(jìn)行相關(guān)設(shè)置即可挣输，設(shè)置方法如下。
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack" // 修改的是這里福贞，JSON文件不支持注釋撩嚼，引用時請清除
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.5.6"
}
}
注：package.json中的script會安裝一定順序?qū)ふ颐顚?yīng)位置，本地的node_modules/.bin路徑就在這個尋找清單中挖帘，所以無論是全局還是局部安裝的Webpack完丽，你都不需要寫前面那指明詳細(xì)的路徑了。
npm的start命令是一個特殊的腳本名稱拇舀，其特殊性表現(xiàn)在逻族，在命令行中使用npm start就可以執(zhí)行其對于的命令，如果對應(yīng)的此腳本名稱不是start骄崩，想要在命令行中運(yùn)行時聘鳞，需要這樣用npm run {script name}如npm run build，我們在命令行中輸入npm start要拂，看看輸出結(jié)果是什么抠璃，輸出結(jié)果如下：
現(xiàn)在只需要使用
npm start就可以打包文件了，有沒有覺得webpack也不過如此嘛脱惰，不過不要太小瞧webpack搏嗡，要充分發(fā)揮其強(qiáng)大的功能我們還需要配置很多。
其他配置可以查看以下文章
(一)Source Maps
(二)構(gòu)建本地服務(wù)器
(三)Loaders
(四)Babel
(五)模塊化處理
(六)插件（Plugins)
(七)產(chǎn)品階段的構(gòu)建
結(jié)尾
文章到這里就要和大家告一段落了拉一，通過這篇文章大家可以初步的了解webpack的打包流程采盒，以及webpack的一些工具和插件，并且可以簡單的去打包一些demo舅踪。
其實webpack還有很多需要我們?nèi)W(xué)習(xí)和深入了解去探索的東西纽甘。
最后祝愿大家能夠早日將webpack掌握并熟練的去運(yùn)用，也祝大家事業(yè)有成抽碌，最重要的一點(diǎn)是：“一定要注意身體吆悍赢！”
