溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
上一篇文章里詳細介紹了一下插件的用法，這一篇文章接著豐富module.exports里的屬性。如今的前端發展已經非常迅速了，伴隨而來的是開發模式的轉變。現在已經不再是寫個靜態頁面并放在瀏覽器里打開預覽一下了。在實際的開發中會經常需要使用http服務器，比如之前的ajax，想要看到效果就必需搭建一個服務器。搭建服務器的方式有非常的多，而webpack則原生的提供服務器的支持，大家無需再去下載軟件。同時它還提供了自動刷新、熱更新等功能，使開發變得非常方便。
npm i webpack-dev-server -D
打開終端，并進入到對應的項目里（我的為webpack-demo），執行命令webpack-dev-server，如果終端里顯示如下則表示已經成功開啟服務器
注意：
1、此時可能會提示webpack-dev-server不是內部命令，解決辦法為在全局再次安裝一下webpack-dev-server模塊，或者在package.json里的scripts里加上"dev": "webpack-dev-server"，然后執行命令npm run dev
2、此時我并沒有通過webpack命令生成一個dist目錄（目錄結構如下圖），然后在瀏覽器里輸入地址http://localhost:8080/后，頁面會正常顯示。這個原因是devServer會將webpack構建出的文件保存到內存里，不需要打包生成就能預覽
webpack.config.js的內容如下：
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:{
index:'./src/index.js',
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].bundle.js'
},
plugins:[
new HtmlWebpackPlugin({
title:'陳學輝',
template:'./src/template.html',
filename:'index.html',
})
],
devServer:{
host:'localhost', //服務器的ip地址
port:1573, //端口
open:true, //自動打開頁面
}
}index.js文件內容如下：
console.log('這是入口文件');template.html文件內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="box">這是自帶的div</div>
</body>
</html>執行命令webpack-dev-server后，瀏覽器會自動打開頁面，同時如果修改index.js文件后瀏覽器會自動刷新，如下圖：
默認情況下開啟了服務器后，只要入口文件有更新那整個頁面就會重新刷新。如果頁面里引入的模塊非常多的情況下讓整個頁面刷新就會變得有些慢，這個問題可以交給熱更新去解決。熱更新的意思就是只更新有改動的模塊（像ajax一樣局部刷新）
1、引入webpack模塊
const webpack=require('webpack');2、寫入插件
plugins:[
new HtmlWebpackPlugin({
title:'陳學輝',
template:'./src/template.html',
filename:'index.html',
}),
new webpack.HotModuleReplacementPlugin() //引入熱更新插件
]3、devServer里增加hot參數
devServer:{
host:'localhost', //服務器的ip地址
port:1573, //端口
open:true, //自動打開頁面，
hot:true, //開啟熱更新
}此時并不能看出效果，到后面的文章里講loader的時候就可以看出來效果devServer的其它配置：https://webpack.docschina.org/configuration/dev-server/
mode是webpack4新增的一條屬性，它的意思為當前開發的環境。mode的到來減少了很多的配置，它內置了很多的功能。相較以前的版本提升了很多，減少了很多專門的配置
- 提升了構建速度
- 默認為開發環境，不需要專門配置
- 提供壓縮功能，不需要借助插件
- 提供
SouceMap，不需要專門配置
mode分為兩種環境，一種是開發環境（development）,一種是生產環境（production）。開發環境就是我們寫代碼的環境，生產環境就是代碼放到線上的環境。這兩種環境的最直觀區別就是，開發環境的代碼不提供壓縮，生產環境的代碼提供壓縮。
webpack --mode development
webpack --mode production
package.json里添加"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development"
},此時后成dist目錄用的是生產環境，打開服務器用的是開發環境，然后通過命令執行npm run build或者npm run dev，它們的區別如下dist目錄里的index.bundle.js內容如下：
http://localhost:1573/index.bundle.js內容如下：
資料下載
下一篇：Webpack 4.X 從入門到精通 - module（四）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
