1).打開(kāi)項(xiàng)目目錄終端白魂，輸入命令:
npm install webpack webpack-cli -D
2).然后在項(xiàng)目根目錄中汽纤，創(chuàng)建一個(gè) webpack.config.js 的配置文件用來(lái)配置webpack
在 webpack.config.js 文件中編寫(xiě)代碼進(jìn)行webpack配置，如下：
module.exports = {
? ? mode:"development"http://可以設(shè)置為development(開(kāi)發(fā)模式)福荸，production(發(fā)布模式)
}
補(bǔ)充：mode設(shè)置的是項(xiàng)目的編譯模式蕴坪。
如果設(shè)置為development則表示項(xiàng)目處于開(kāi)發(fā)階段，不會(huì)進(jìn)行壓縮和混淆敬锐，打包速度會(huì)快一些
如果設(shè)置為production則表示項(xiàng)目處于上線發(fā)布階段背传，會(huì)進(jìn)行壓縮和混淆，打包速度會(huì)慢一些
3).修改項(xiàng)目中的package.json文件添加運(yùn)行腳本dev台夺，如下：
"scripts":{
? ? "dev":"webpack"
}
注意：scripts節(jié)點(diǎn)下的腳本径玖，可以通過(guò) npm run 運(yùn)行，如：
運(yùn)行終端命令：npm run dev
將會(huì)啟動(dòng)webpack進(jìn)行項(xiàng)目打包
4).運(yùn)行dev命令進(jìn)行項(xiàng)目打包颤介，并在頁(yè)面中引入項(xiàng)目打包生成的js文件
打開(kāi)項(xiàng)目目錄終端梳星，輸入命令:
npm run dev
等待webpack打包完畢之后，找到默認(rèn)的dist路徑中生成的main.js文件滚朵，將其引入到html頁(yè)面中冤灾。
瀏覽頁(yè)面查看效果。
