您好,登錄后才能下訂單哦!
這篇文章主要介紹“在項(xiàng)目中怎么安裝和配置webpack”的相關(guān)知識,小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“在項(xiàng)目中怎么安裝和配置webpack”文章能幫助大家解決問題。
一、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 啟動webpack進(jìn)行項(xiàng)目打包
三、打包的入口和出口
1.webpack 默認(rèn)
入口文件:src:index.js
出口文件:dist:main.js
2.需要修改默認(rèn)文件時 在module.exports中添加
entry: path.join(__dirname, ''),//打包入口路徑
output: {
path: path.join(__dirname, ''),//出口路徑
filename: 'bundle.js'//出口文件名稱
}
四、webpack 自動打包功能
1.運(yùn)行npm i webpack-dev-server -D命令 安裝自動打包工具
2.修改package.json 的dev:"webpack-dev-server"
3.修改html頁面的引用script腳本的路徑 src=""
4.運(yùn)行npm run dev進(jìn)行重新打包
5.在瀏覽器中訪問
在瀏覽器中預(yù)覽頁面
配置自動打包相關(guān)參數(shù) (打包過后,會自動按照下面方式打開)
--open 默認(rèn)瀏覽器
--host 127.0.0.1
--port 端口
修改配置文件都需要重新打包一次
關(guān)于“在項(xiàng)目中怎么安裝和配置webpack”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。