在項目中怎么安裝和配置webpack

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

　　一、webpack基本使用

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

　　2.創建src源代碼目錄

　　3.在src下創建index.html

　　4.初始化首頁基本的結構

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

　　二、在項目中安裝和配置webpack

　　1.運行 npm install webpack webpack-cli –D ，安裝webpack相關工具

　　2.在項目根目錄創建webpack.config.js文件，配置文件

　　3.在webpack文件中添加

　　module.exports={

　　mode: 'development' // mode 用來指定構建模式

　　}

　　4.在package.json中

　　"scripts":{//添加

　　"dev":"webpack"

　　}

　　5.在終端中運行 npm run dev 啟動webpack進行項目打包

　　三、打包的入口和出口

　　1.webpack 默認

　　入口文件：src:index.js

　　出口文件：dist:main.js

　　2.需要修改默認文件時 在module.exports中添加

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

　　output: {

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

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

　　}

　　四、webpack 自動打包功能

　　1.運行npm i webpack-dev-server -D命令 安裝自動打包工具

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

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

　　4.運行npm run dev進行重新打包

　　5.在瀏覽器中訪問

　　在瀏覽器中預覽頁面

　　配置自動打包相關參數 （打包過后，會自動按照下面方式打開）

　　--open 默認瀏覽器

　　--host 127.0.0.1

　　--port 端口

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

關于“在項目中怎么安裝和配置webpack”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。