1. 創(chuàng)建項(xiàng)目
1.1 初始化一個(gè)項(xiàng)目
首先安裝nodejs，打開(kāi) nodeJs官網(wǎng) 直接下載安裝即可，安裝完畢后打開(kāi)命令行工具，進(jìn)入你的項(xiàng)目文件夾，執(zhí)行
npm init 進(jìn)行項(xiàng)目的初始化：
過(guò)程中會(huì)讓你填寫(xiě)項(xiàng)目名、版本、描述、倉(cāng)庫(kù)地址、關(guān)鍵字等信息，可以不填一路回車，執(zhí)行完畢后會(huì)在根目錄下創(chuàng)建一個(gè) package.json 文件，這樣就初始化結(jié)束了。
1.2 安裝webpack
由于在webpack4中已經(jīng)不再默認(rèn)安裝 webpacl-cli，所以我們要手動(dòng)安裝，在命令行執(zhí)行 npm i webpack webpack-cli -D 即可。對(duì)于大多數(shù)項(xiàng)目，建議本地安裝。這可以使我們?cè)谝肫茐氖阶兏?breaking change)的依賴時(shí)，更容易分別升級(jí)項(xiàng)目。
2. 打包第一個(gè)JS文件
首先，我們?cè)诟夸浵聞?chuàng)建一個(gè) webpack.config.js 文件和一個(gè)src文件夾。然后在src中創(chuàng)建一個(gè) main.js 文件，如下：
在 main.js 中寫(xiě)一行
alert('hello world')
然后打開(kāi) webpack.config.js ，進(jìn)行webpack的配置：
const path = require('path')
let config = {
mode: 'none',
entry: {
main: path.join(__dirname, './src/main.js')
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, './dist')
}
}
module.exports = config
我們?cè)O(shè)置了一個(gè)名為 main 的入口，并以 src 下的 main.js 作為入口文件，然后輸出到根目錄下的 dist 文件夾中。
在webpack4中，我們需要設(shè)置 mode 屬性，用來(lái)決定當(dāng)前是development還是production環(huán)境，webpack會(huì)根據(jù)此值來(lái)進(jìn)行一些默認(rèn)操作，兩種環(huán)境的不同配置后面的博文會(huì)詳解，這里我們?cè)O(shè)置為 'none' ，來(lái)避免默認(rèn)操作。前文已經(jīng)說(shuō)過(guò)，path 是 nodeJs中的核心模塊用來(lái)操作路徑，__dirname 表示文件的當(dāng)前路徑（此時(shí)為根路徑）。而 output中的filename屬性，[name] 表示入口的名稱，此處就是 main。
接下來(lái)打開(kāi) package.json 文件，來(lái)編寫(xiě)一條命令執(zhí)行webpack的打包。在 script 中添加：
"build": "webpack --config webpack.config.js --progress --colors"
webpack --config path/to/your/file/file.js 表示執(zhí)行某個(gè)配置文件，--progress可以讓我們看到打包的進(jìn)度 ， --colors 開(kāi)啟命令行顏色顯示，更多的webpack命令參數(shù)大家可以另行查閱。
然后就可以在命令行執(zhí)行：npm run build，執(zhí)行完畢后，我們可以看到，在根目錄下多了一個(gè) dist 文件夾 并有一個(gè) main.bundle.js文件，這就是webpack為我們打包出來(lái)的靜態(tài)資源，而文件路徑就是我們?cè)?output 中設(shè)置的值。
為了演示打包好的 main.bundle.js ，我們?cè)诟夸浵聞?chuàng)建一個(gè) index.html ，并引入main.bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/main.bundle.js"></script>
</body>
</html>
在瀏覽器中打開(kāi) index.html，可見(jiàn)main.js中的代碼已經(jīng)被執(zhí)行了：
在IDE中打開(kāi)main.bundle.js，代碼的最底部可以看到我們?cè)趍ain.js中寫(xiě)的代碼。
至此，我們的第一次 webpack 打包就成功了。
