上一篇文章里詳細(xì)介紹了一下插件的用法，這一篇文章接著豐富module.exports里的屬性。如今的前端發(fā)展已經(jīng)非常迅速了，伴隨而來(lái)的是開發(fā)模式的轉(zhuǎn)變?，F(xiàn)在已經(jīng)不再是寫個(gè)靜態(tài)頁(yè)面并放在瀏覽器里打開預(yù)覽一下了。在實(shí)際的開發(fā)中會(huì)經(jīng)常需要使用http服務(wù)器，比如之前的ajax，想要看到效果就必需搭建一個(gè)服務(wù)器。搭建服務(wù)器的方式有非常的多，而webpack則原生的提供服務(wù)器的支持，大家無(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í)我并沒有通過(guò)webpack命令生成一個(gè)dist目錄（目錄結(jié)構(gòu)如下圖），然后在瀏覽器里輸入地址http://localhost:8080/后，頁(yè)面會(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)打開頁(yè)面
}
}index.js文件內(nèi)容如下：
console.log('這是入口文件');template.html文件內(nèi)容如下：
<%= htmlWebpackPlugin.options.title %>
這是自帶的div
執(zhí)行命令webpack-dev-server后，瀏覽器會(huì)自動(dòng)打開頁(yè)面，同時(shí)如果修改index.js文件后瀏覽器會(huì)自動(dòng)刷新，如下圖：
默認(rèn)情況下開啟了服務(wù)器后，只要入口文件有更新那整個(gè)頁(yè)面就會(huì)重新刷新。如果頁(yè)面里引入的模塊非常多的情況下讓整個(gè)頁(yè)面刷新就會(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)打開頁(yè)面，
hot:true, //開啟熱更新
}此時(shí)并不能看出效果，到后面的文章里講loader的時(shí)候就可以看出來(lái)效果devServer的其它配置：https://webpack.docschina.org/configuration/dev-server/
mode是webpack4新增的一條屬性，它的意思為當(dāng)前開發(fā)的環(huán)境。mode的到來(lái)減少了很多的配置，它內(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)境，然后通過(guò)命令執(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（四）
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
