這系列文章就是手把手教你如何從零構(gòu)建一個(gè)webpack項(xiàng)目。目的就是為了了解webpack打包怎么玩的，平常項(xiàng)目開發(fā)中所用如ES6語法、less、vue是如何被打包的，是一個(gè)比較基礎(chǔ)的內(nèi)容，我也是為了總結(jié)一下這方面的知識點(diǎn)，梳理一下個(gè)人的知識體系而寫下這些文字。
工具及版本：vscode、webpack(v4.41.5)、node(v10.16.0)
git倉庫：webpack-demo
1、什么是webpack？
- “webpack is a module bundler.”—webpack官網(wǎng)上打開自我介紹就是這句話，它是一個(gè)模塊打包器。
-
webpack是一個(gè)模塊打包工具，可以打包js、圖片資源啊等等，功能十分強(qiáng)大，但是在最開始的時(shí)候呢，webpack只是個(gè)js模塊打包工具?，F(xiàn)在就讓我們回到webpack最初的模樣，從怎么用它打包js文件開始。
2、初始化
即然從零開始，首先自然得從git倉庫建立開始，怎么詳細(xì)的從零建一個(gè)git倉庫我有寫過了(->傳送門)，這個(gè)系列文章代碼所對應(yīng)的git倉庫：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版本號不一致而導(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可以簡寫為-D，這個(gè)會自動把模塊和版本號添加到package.json中的devDependencies部分。 - 還有一個(gè)后綴
--save可以簡寫為-S，這個(gè)會自動把模塊和版本號添加到dependencies部分。
- 后綴那個(gè)
在安裝一個(gè)要打包到生產(chǎn)環(huán)境的安裝包時(shí)，你應(yīng)該使用
npm install --save，如果你在安裝一個(gè)用于開發(fā)環(huán)境的安裝包（例如，linter, 測試庫等），你應(yīng)該使用npm install --save-dev。請?jiān)?a target="_blank">npm文檔中查找更多信息。
—— 引用來自webpack官網(wǎng)教程的解釋。還有我網(wǎng)上搜的另一個(gè)解釋我也覺得很直觀?。?br>
--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，會將我們的src/index.js作為入口文件，然后會新建一個(gè)dist文件夾和dist/main.js作為輸出文件。
npx webpack簡單一點(diǎn)來說就是會去找項(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命令打包的方式不夠簡潔明了，一般我們會在package.json中的scripts中定義一條命令。
{
...
+ "scripts": {
+ "build": "webpack"
+ }
...
}
- 打包，這個(gè)大家應(yīng)該就很熟悉了，執(zhí)行這條命令跟上面使用一樣的效果，它會自動的去找文件目錄下的
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í)候我們在瀏覽器中打開
dist/index.html同樣也可以看到hello world在屏幕中顯示出來了，我們就簡單了完成了一個(gè)js文件打包的過程。
6、其他
參考鏈接
