這篇文章主要介紹“在項(xiàng)目中怎么安裝和配置webpack”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“在項(xiàng)目中怎么安裝和配置webpack”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供東區(qū)企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為東區(qū)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

一、webpack基本使用

1.新建空白文件（目錄）文件名不能是webpack，運(yùn)行 npm init -y （路徑中不能有中文），初始化package.json文件

2.創(chuàng)建src源代碼目錄

3.在src下創(chuàng)建index.html

4.初始化首頁基本的結(jié)構(gòu)

5.下載頁面需要的依賴包

二、在項(xiàng)目中安裝和配置webpack

1.運(yùn)行 npm install webpack webpack-cli –D ，安裝webpack相關(guān)工具

2.在項(xiàng)目根目錄創(chuàng)建webpack.config.js文件，配置文件

3.在webpack文件中添加

module.exports={

mode: 'development' // mode 用來指定構(gòu)建模式

}

4.在package.json中

"scripts":{//添加

"dev":"webpack"

}

5.在終端中運(yùn)行 npm run dev 啟動(dòng)webpack進(jìn)行項(xiàng)目打包

三、打包的入口和出口

1.webpack 默認(rèn)

入口文件：src:index.js

出口文件：dist:main.js

2.需要修改默認(rèn)文件時(shí) 在module.exports中添加

entry: path.join（__dirname, ''），//打包入口路徑

output: {

path: path.join（__dirname, ''），//出口路徑

filename: 'bundle.js'//出口文件名稱

}

四、webpack 自動(dòng)打包功能

1.運(yùn)行npm i webpack-dev-server -D命令 安裝自動(dòng)打包工具

2.修改package.json 的dev:"webpack-dev-server"

3.修改html頁面的引用script腳本的路徑 src=""

4.運(yùn)行npm run dev進(jìn)行重新打包

5.在瀏覽器中訪問

在瀏覽器中預(yù)覽頁面

配置自動(dòng)打包相關(guān)參數(shù) （打包過后，會(huì)自動(dòng)按照下面方式打開）

--open 默認(rèn)瀏覽器

--host 127.0.0.1

--port 端口

修改配置文件都需要重新打包一次

關(guān)于“在項(xiàng)目中怎么安裝和配置webpack”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。