一. 概述
什么是webpack
模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。
為什么使用webpack
現(xiàn)在是網(wǎng)絡(luò)時(shí)代，在我們的生活中網(wǎng)絡(luò)成為了必不可少的，我們在網(wǎng)絡(luò)上可以看到很多漂亮的功能豐富的頁面，這些頁面都是由復(fù)雜的JavaScript代碼和各種依賴包組合形成的，那么這些都是怎么*組合在一起的呢，組合在一起需要花費(fèi)多少精力呢，經(jīng)過漫長發(fā)展時(shí)間現(xiàn)前端涌現(xiàn)出了很多實(shí)踐方法來處理復(fù)雜的工作流程，讓開發(fā)變得更加簡便。
- 模塊化 可以使復(fù)雜的程序細(xì)化成為各個(gè)小的文件
-
預(yù)處理器 可以對Scss，less等CSS預(yù)先進(jìn)行處理
......
二. weback使用流程
1、創(chuàng)建項(xiàng)目
這里用的是命令創(chuàng)建項(xiàng)目，當(dāng)然你也可以去鼠標(biāo)右鍵創(chuàng)建項(xiàng)目
mkdir webpackDemo // 創(chuàng)建項(xiàng)目
cd webpackDemo // 進(jìn)入項(xiàng)目
mkdir app // 在項(xiàng)目中創(chuàng)建app文件
mkdir common // 在項(xiàng)目中創(chuàng)建common文件
cd app // 進(jìn)入app文件夾
touch app.js // 創(chuàng)建app.js文件
touch main.js // 創(chuàng)建main.js文件
cd .. //返回到webpackDemo項(xiàng)目根目錄
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文件以及一個(gè)
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)出這個(gè)模塊,這里我們以輸出welcome to use webpack為例
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "welcome to use webpack!";
return greet;
}
main.js其實(shí)是一個(gè)組件,它的目的是將我們寫的一些代碼模塊返回并插入到頁面中
const greeter = require('./app.js');
document.querySelector("#root").appendChild(greeter());
2. 安裝
因?yàn)榘惭bwebpack要用npm,所以安裝之前我們首先要安裝node
第一步 要在項(xiàng)目根目錄用npm init初始化，生成package.json文件
npm init
初始化過程中會有好多提示，如果非正式項(xiàng)目下可以直接回車調(diào)過，括號里的都是默認(rèn)的,正式項(xiàng)目下可以根據(jù)情況填寫每一步
name: (webpackDemo) // 項(xiàng)目名稱
version: (1.0.0) // 版本號
description: // 項(xiàng)目的描述
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 // 項(xiàng)目內(nèi)安裝
如果不想安裝最新的版本那么得在webpack后面加一個(gè)@然后在填入你要安裝的版本號，當(dāng)然安裝最新版本時(shí)可以加@版本號也可以不加@版本號
npm install webpack@xx -g
npm install webpack@xx --save-dev
webpack有兩個(gè)版本分別是webpack2和webpack4，這兩個(gè)版本安裝配置有差異。
先來看看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)行的時(shí)候請將注釋刪除
第三步 使用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的命令會報(bào)錯(cuò)打包失敗，如下：
- 黃色部分：webpack4是需要指定打包為開發(fā)環(huán)境還是生產(chǎn)環(huán)境的，目前我們沒有指定是什么環(huán)境所以就會有這個(gè)警告
- 紅色部分：因?yàn)閣ebpack4的打包命令和webpack2的打包命令不同，所以用webpack2的打包命令時(shí)就會提示打包的路徑找不到
如果你用webpack4的打包命令，打包如下
黃色警告下面會解決這個(gè)問題
從打包的結(jié)果可以看出webpack同時(shí)編譯了main.js 和app,js，并且打包成功，現(xiàn)在打開編輯器，可以看到如下結(jié)果
webpack2的打包文件
webpack4的打包文件
接下來我們在看下頁面
是不是很激動我們已經(jīng)將welcome to use webpack!在頁面打包生成，但是這種方式需要在終端運(yùn)行復(fù)雜的命令而且容易出錯(cuò)很不方便，如果能更方便點(diǎn)就好了，那么接下來我們在看下它的升級版打包。
第四步 通過配置文件webpack.config.js來使用webpack
Webpack擁有很多其它的比較高級的功能，這些功能其實(shí)都可以通過命令行模式實(shí)現(xiàn)，但是在終端中進(jìn)行復(fù)雜的操作，這樣不太方便且容易出錯(cuò)的，更好的辦法是定義一個(gè)配置文件，這個(gè)配置文件其實(shí)也是一個(gè)簡單的JavaScript模塊，我們可以把所有的與打包相關(guān)的信息放在里面。
在當(dāng)前項(xiàng)目webpackDemo文件夾下新創(chuàng)建一個(gè)文件webpack.config.js,寫入簡單的配置代碼，目前的配置主要涉及到的內(nèi)容是入口文件路徑和打包后文件的存放路徑
// webpack2的配置
module.exports = {
entry: __dirname + "/app/main.js", // 之前提到的唯一入口文件
output: {
path: __dirname + "/common", // 打包后的文件存放的地方
filename: "index.js" // 打包后輸出文件的文件名
}
}
// webpack4的配置
module.exports = {
// webpack4需要添加這個(gè)配置，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中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄。
有了這個(gè)配置之后，再打包文件，只需在終端里運(yùn)行webpack(全局情況下)或node_modules/.bin/webpack(非全局安裝需使用)命令就可以了，不需要再命令行打入主入口和打包文件的路徑了，這條命令會自動引用webpack.config.js文件中的配置選項(xiàng)。
示例如下：
是不是很簡單這樣我們就不用再終端輸入那么多煩人的配置文件的路徑了，那么如果node_modules/.bin/webpack這條命令都不用在終端輸入，是不是更簡單呢？，接下來接著往下看。
更加方便的打包操作
根據(jù)上面的方式來看我們只要配置了webpack.config.js就可以將打包的路徑命令省去，那么我們想是否可以以這種方式將node_modules/.bin/webpack命令省去呢？ 答案是可以，只不過不是在這個(gè)文件內(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文件不支持注釋，引用時(shí)請清除
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.5.6"
}
}
注：package.json中的script會安裝一定順序?qū)ふ颐顚?yīng)位置，本地的node_modules/.bin路徑就在這個(gè)尋找清單中，所以無論是全局還是局部安裝的Webpack，你都不需要寫前面那指明詳細(xì)的路徑了。
npm的start命令是一個(gè)特殊的腳本名稱，其特殊性表現(xiàn)在，在命令行中使用npm start就可以執(zhí)行其對于的命令，如果對應(yīng)的此腳本名稱不是start，想要在命令行中運(yùn)行時(shí)，需要這樣用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。
其實(shí)webpack還有很多需要我們?nèi)W(xué)習(xí)和深入了解去探索的東西。
最后祝愿大家能夠早日將webpack掌握并熟練的去運(yùn)用，也祝大家事業(yè)有成，最重要的一點(diǎn)是：“一定要注意身體吆！”
