在前面的章節(jié)中我們每次改完要打包的資源文件，和配置文件都是是輸入npx webpack命令手動打包的，那么有沒有什么辦法可以監(jiān)聽到我們代碼的改動，在保存時就自動打包呢？
答案是當(dāng)然有，不然哪些框架的腳手架是怎么實(shí)現(xiàn)保存自動打包的呢，這就是本章要介紹的內(nèi)容，webpack-dev-server插件，自動打包
一、什么是webpack-dev-server
Webpack Dev Server是一個基于Node.js構(gòu)建的Web服務(wù)器，它可以在本地開發(fā)環(huán)境中啟動一個實(shí)時的Web服務(wù)器，并且能夠自動編譯并且刷新瀏覽器，為前端開發(fā)提供了很大的便利。
Webpack Dev Server支持熱模塊替換（HMR），即在應(yīng)用程序運(yùn)行中更新模塊而無需刷新整個頁面，它還提供了一些其它的特性包括壓縮、編譯、轉(zhuǎn)換、代碼分離等等。Webpack Dev Server通常用來搭建本地開發(fā)環(huán)境，而部署時則需要使用其它的Web服務(wù)器
二、在webpack中配置
1. 下載安裝
npm i webpack-dev-server -D
2. 在webpack.config.js中配置使用
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/main.js", // 將 js 文件輸出到 static/js 目錄中
},
module: {
rules: [],
},
plugins: [],
// 開發(fā)服務(wù)器
devServer: {
host: "localhost", // 啟動服務(wù)器域名
port: "3000", // 啟動服務(wù)器端口號
open: true, // 是否自動打開瀏覽器
},
mode: "development",
};
這個是個服務(wù)，是和webpack五大核心配置屬性同一級的，我們需要新增devServer配置對象。
完整代碼如下：
- webpack.config.js
// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); // 引入 ESLint 插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入 html-webpack-plugin 插件
module.exports = {
// 入口
// 相對路徑和絕對路徑都行
entry: "./src/main.js",
// 輸出
output: {
// path: 文件輸出目錄，必須是絕對路徑
// path.resolve()方法返回一個絕對路徑
// __dirname 當(dāng)前文件的文件夾絕對路徑
path: path.resolve(__dirname, "dist"),
// filename: js文件輸出文件名
filename: "js/main.js",
clean: true, // 自動將上次打包目錄資源清空
},
// 加載器
module: {
rules: [
{
// 用來匹配 .css 結(jié)尾的文件
test: /\.css$/,
// use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
use: ["style-loader", "css-loader"],
},
{
// 用來匹配.less結(jié)尾的文件
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
// 用來匹配圖片文件
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的圖片會被base64處理
},
},
generator: {
// 將圖片文件輸出到 images 目錄中
// 將圖片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件擴(kuò)展名
// [query]: 添加之前的query參數(shù)
filename: "images/[hash:8][ext][query]",
},
},
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource", // 以文件資源的形式輸出
generator: {
filename: "media/[hash:8][ext][query]", // 輸出到media目錄中
},
},
{
test: /\.m?js$/, // 轉(zhuǎn)譯哪些文件
exclude: /(node_modules|bower_components)/, // 排除哪些文件夾中的js文件不用轉(zhuǎn)譯
// use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env'] // 添加預(yù)設(shè)，轉(zhuǎn)譯js文件
// }
// }
}
],
},
// 插件
plugins: [
new ESLintWebpackPlugin({
// 指定檢查文件的根目錄
context: path.resolve(__dirname, "src"),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 為模板創(chuàng)建文件
// 新的html文件有兩個特點(diǎn)：1. 內(nèi)容和源文件一致 2. 自動引入打包生成的js等資源
template: path.resolve(__dirname, "public/index.html"),
}),
],
// 開發(fā)服務(wù)器
devServer: {
host: "localhost", // 啟動服務(wù)器域名
port: "8888", // 啟動服務(wù)器端口號
open: true, // 是否自動打開瀏覽器
},
// 模式
mode: "development", // 開發(fā)模式
};
3. 自動打包命令npx webpack serve
npx webpack serve
如上圖，執(zhí)行命令以后，webpack-dev-server會自動在本地啟動一個服務(wù)，并為我們在瀏覽器運(yùn)行打包好的資源。
4. 體驗(yàn)自動打包
這時我們?nèi)ジ囊幌滦枰虬Y源文件，并保存看看效果
更改保存前：
更改保存后：
可以看到已經(jīng)幫我們自動打包并運(yùn)行到瀏覽器了
到此我們終于是結(jié)束了在開發(fā)環(huán)境下手動運(yùn)行打包后的資源文件的時代，進(jìn)一步解放雙手拉。
5. 內(nèi)存運(yùn)行
如圖，我們清空dist目錄下的所有文件，重新npx webpack serve打包
可以看到打包成功，并重新運(yùn)行到了瀏覽器，但是dist目錄下依然是空的。
這就證明了一點(diǎn)，webpack-dev-server是在本地內(nèi)存中遠(yuǎn)行的，這也是咱本地開發(fā)環(huán)境需要的，至于dist目錄要如何才能出來，需要配置生產(chǎn)環(huán)境，在后續(xù)會更新哦。文章來源：http://www.zghlxwxcb.cn/news/detail-766642.html
至此在本地的開發(fā)環(huán)境，是不是有那么一點(diǎn)在框架的腳手架中的開發(fā)體驗(yàn)啦。文章來源地址http://www.zghlxwxcb.cn/news/detail-766642.html
到了這里，關(guān)于webpack自動化打包webpack-dev-server的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
