webpack4配置熱更新

2021-09-25 08:37:34 字數 1451 閱讀 2319

目錄

step1：

step2：

step3:

在資料夾中建立3個資料夾，分別是：src、dist、config

然後在src下建立乙個main.js

在dist下建立乙個index.html

在config下建立乙個webpack.dev.js

使用命令列，輸入：git init . 建立乙個git的.檔案，該檔案是隱藏不可見的。

使用命令列，全域性安裝：webpack、webpack-cli、webpack-dev-server，方法是：

cnpm install webpack webpack-cli webpack-dev-server
配置config目錄下的webpack.dev.js檔案，定義入口檔案為：main.js，開發環境為：開發環境（development），出口：dist資料夾，如下示例：webpack.dev.js

const path = require("path")    // 這裡引入node的path模組


module.exports = ,


// 打包環境：開發/生產


mode: "development",        // 打包環境為：生產環境


// 出口，只能有乙個


output: ,


// 配置本地伺服器


devserver: 


}
上面的操作完成之後，開始執行webpack的命令進行打包了。

在命令列輸入：webpack-dev-server --config=config/webpack.dev.js進行打包

webpack-dev-server --config=config/webpack.dev.js
打包完成之後，在dist資料夾會多出乙個main-bundle.js的檔案，這個檔案實際上就是我們在src上建立的main.js檔案

進入dist下的index.html，建立乙個基本的html格式內容，並且引入打包過後生產的main.js（就是dist下的main-bundle.js）

進入src下的main.js檔案，輸入一些內容，如console.log('hello world');儲存之後，頁面就會輸出「hello world」，此時熱更新就配置完成了。

補充：上述操作是在mac環境下進行，在window環境下操作的話，發現打包之後，dist資料夾並沒有實際生成乙個新檔案，但是可以按上述方法進行操作即可，同樣是可以生效的。

該例項已經提交到github倉庫，有需要的朋友可以獲取：

webpack4配置詳解

方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,js name chunkhash...

學習webpack4 基礎配置

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共 yarn init y 初始化專案 yarn add webpack webpack cli...

學習webpack4 基礎配置

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共 yarn init y 初始化專案 yarn add webpack webpack cli...