這系列文章就是手把手教你如何從零構(gòu)建一個(gè)webpack項(xiàng)目。目的就是為了了解webpack打包怎么玩的召锈，平常項(xiàng)目開發(fā)中所用如ES6語法旁振、less、vue是如何被打包的涨岁，是一個(gè)比較基礎(chǔ)的內(nèi)容拐袜，我也是為了總結(jié)一下這方面的知識(shí)點(diǎn)，梳理一下個(gè)人的知識(shí)體系而寫下這些文字梢薪。
工具及版本：vscode蹬铺、webpack(v4.41.5)、node(v10.16.0)
git倉(cāng)庫(kù)：webpack-demo
1秉撇、什么是webpack甜攀？
- “webpack is a module bundler.”—webpack官網(wǎng)上打開自我介紹就是這句話，它是一個(gè)模塊打包器琐馆。
-
webpack是一個(gè)模塊打包工具规阀，可以打包js、圖片資源啊等等瘦麸，功能十分強(qiáng)大谁撼，但是在最開始的時(shí)候呢，webpack只是個(gè)js模塊打包工具∽趟牵現(xiàn)在就讓我們回到webpack最初的模樣彤敛，從怎么用它打包js文件開始。
2了赌、初始化
即然從零開始墨榄，首先自然得從git倉(cāng)庫(kù)建立開始，怎么詳細(xì)的從零建一個(gè)git倉(cāng)庫(kù)我有寫過了(->傳送門)勿她，這個(gè)系列文章代碼所對(duì)應(yīng)的git倉(cāng)庫(kù)：webpack-demo袄秩。
進(jìn)入到webpack-demo下的chapter1中，輸
npm init初始化生成一個(gè)package.json文件逢并。（這里一路回車下一步下一步就行之剧，或者npm init -y直接生成一個(gè)默認(rèn)的文件）
$ cd webpack-demo/chapter1
$ npm init -y
- 新建一個(gè)
src文件夾并在其中新建一個(gè)index.js文件：
var div = document.createElement("div");
div.innerText = "hello world";
document.body.appendChild(div);
- 再新建一個(gè)html5標(biāo)準(zhǔn)格式的
index.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack從0到1</title>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
- 這樣我們基本的一個(gè)項(xiàng)目結(jié)構(gòu)及內(nèi)容就生成了，瀏覽器打開
index.html文件也能顯示出"hello world"砍聊。
webpack-demo/chapter1
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
3背稼、安裝webpack
- 然后我們需要安裝下
webpack，可以全局安裝也可以本地安裝玻蝌，我推薦本地安裝蟹肘，這樣可以避免與他人合作開發(fā)時(shí)由于webpack版本號(hào)不一致而導(dǎo)致的打包問題词疼。具體：官網(wǎng)webpack安裝 - 如果你沒能綠色上網(wǎng)安裝很慢的話可以使用淘寶鏡像處理一下。
# 本地
$ npm install webpack webpack-cli --save-dev
# 全局
$ npm install webpack --global
-
--save-dev和--save兩個(gè)有啥子區(qū)別呢帘腹？- 后綴那個(gè)
--save-dev可以簡(jiǎn)寫為-D贰盗，這個(gè)會(huì)自動(dòng)把模塊和版本號(hào)添加到package.json中的devDependencies部分。 - 還有一個(gè)后綴
--save可以簡(jiǎn)寫為-S阳欲，這個(gè)會(huì)自動(dòng)把模塊和版本號(hào)添加到dependencies部分舵盈。
- 后綴那個(gè)
在安裝一個(gè)要打包到生產(chǎn)環(huán)境的安裝包時(shí)，你應(yīng)該使用
npm install --save球化，如果你在安裝一個(gè)用于開發(fā)環(huán)境的安裝包（例如秽晚，linter, 測(cè)試庫(kù)等），你應(yīng)該使用npm install --save-dev筒愚。請(qǐng)?jiān)?a target="_blank">npm文檔中查找更多信息爆惧。
—— 引用來自webpack官網(wǎng)教程的解釋。還有我網(wǎng)上搜的另一個(gè)解釋我也覺得很直觀跋悄堋：
--save-dev是你開發(fā)時(shí)候依賴的東西扯再，--save是你發(fā)布之后還依賴的東西。
比如址遇，你寫ES6代碼熄阻，如果你想編譯成ES5發(fā)布那么babel就是devDependencies。如果你用了jQuery倔约，由于發(fā)布之后還是依賴jQuery秃殉，所以是dependencies。
—— 引用segmentfaul提問
- 安裝完了以后我么就可以看到
package.json中多出的這幾行東西浸剩。
{
...
+ "devDependencies": {
+ "webpack": "^4.41.5",
+ "webpack-cli": "^3.3.10"
+ }
...
}
4钾军、打包js
（1）第一種方式--使用默認(rèn)打包的模式
- 我們可以直接在命令行中輸入:
$ npx webpack
執(zhí)行
npx webpack，會(huì)將我們的src/index.js作為入口文件绢要，然后會(huì)新建一個(gè)dist文件夾和dist/main.js作為輸出文件吏恭。
npx webpack簡(jiǎn)單一點(diǎn)來說就是會(huì)去找項(xiàng)目中本地的./node_modules/.bin/webpack，然后中執(zhí)行它重罪。
- 這時(shí)我們就可以看到項(xiàng)目結(jié)構(gòu)下生成了一個(gè)
dist文件夾和打包好的main.js文件了樱哼。
（2）第二種方式--使用配置文件打包
- 刪掉dist目錄，在當(dāng)前目錄下新建一個(gè)
webpack.config.js配置文件剿配。
webpack-demo/chapter1
|- package.json
|- index.html
|- /src
|- index.js
+ |- webpack.config.js
- 配置文件
webpack.config.js中寫：
// 引入node中的path模塊
const path = require('path');
module.exports = {
// 定義入口文件搅幅，告訴webpack我要打包啥
entry: './src/index.js',
// 定義輸出文件，告訴webpack打包好的文件叫啥呼胚，給我放到哪里
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
- 打包茄唐，使用
webpack-cli提供的命令行（這就是我們?yōu)槭裁匆惭bwebpack-cli的原因）：
$ npx webpack --config webpack.config.js
（3）第三種方式--使用npm腳本
- 上面使用
webpack-cli命令打包的方式不夠簡(jiǎn)潔明了，一般我們會(huì)在package.json中的scripts中定義一條命令蝇更。
{
...
+ "scripts": {
+ "build": "webpack"
+ }
...
}
- 打包沪编，這個(gè)大家應(yīng)該就很熟悉了呼盆，執(zhí)行這條命令跟上面使用一樣的效果，它會(huì)自動(dòng)的去找文件目錄下的
webpack.config.js文件然后執(zhí)行它漾抬。
$ npm run build
- 同樣宿亡，這時(shí)我們就可以看到項(xiàng)目結(jié)構(gòu)下生成了一個(gè)dist文件夾和打包好的main.js文件了常遂。
5纳令、最后
- 這時(shí)
src/index.js文件已經(jīng)通過webpack打包后輸出為dist/main.js了，這個(gè)時(shí)候我們還得引用它克胳，所以復(fù)制一份index.html文件到dist文件夾下平绩。
webpack-demo/chapter1
|- package.json
|- /dist
+ |- index.html
|- main.js
|- index.html
|- /src
|- index.js
- 將
dist/index.html文件內(nèi)容改為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack從0到1</title>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="main.js"></script>
</body>
</html>
- 這時(shí)候我們?cè)跒g覽器中打開
dist/index.html同樣也可以看到hello world在屏幕中顯示出來了，我們就簡(jiǎn)單了完成了一個(gè)js文件打包的過程漠另。
6捏雌、其他
參考鏈接
