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