1、先用npm init 初始化項(xiàng)目，生成package.json文件

2、由于我們前端項(xiàng)目是采用wepack作用編譯壓縮文件，在這里就從webpack的相關(guān)配置開始進(jìn)行，

在項(xiàng)目文件下創(chuàng)建build文件夾，用來存放我們webpack的相關(guān)配置。然后再build文件夾下新建webpack.config.base.js，webpack.config.dev.js,webpack.config.prod.js三個文件。由于我們項(xiàng)目環(huán)境存在著開發(fā)環(huán)境和正式環(huán)境之分，所以webpack.config.dev.js就代表著開發(fā)環(huán)境，webpack.config.prod代表著正式環(huán)境。而webpack.config.base.js就是正式環(huán)境和開發(fā)環(huán)境一些共同的配置。

此時，項(xiàng)目初步結(jié)構(gòu)如圖

3、我們根據(jù)webpack官網(wǎng)，根據(jù)官網(wǎng)介紹一步一步來搭建。首先可知wepack編譯需要制定一個入口文件，故而我們在webpack.config.base.js編寫如下

在這里我們按照webpack官網(wǎng)的指示，webpack配置文件指明了入口文件和輸出文件，入口文件為app.js在這里我們已經(jīng)在項(xiàng)目文件下創(chuàng)建了它

4、至此，webpack的簡單初始配置已經(jīng)完成了，在這里我們可以顯嘗試著運(yùn)行一下。首先，我們先安裝webpack的模塊包，執(zhí)行命令cnpm i webpack -D.webpack安裝后可能出現(xiàn)要你安裝webpack-cli/webpack-command，跟著安裝就行。

5、在packjson里面設(shè)置執(zhí)行命令如下：當(dāng)我們在控制臺，執(zhí)行npm run dev之時，就會幫我們執(zhí)行我們dev配置的命令語句。最終執(zhí)行結(jié)果如下圖所示，并且成功的生成了dist文件，里面含有我們編譯過后的腳本文件bundle.js

至此，webpack第一步入門算是成功了。