淺談webpack-dev-server的配置和使用

更新時(shí)間：2018年05月17日 14:26:46 作者：冰水zzy

本篇文章主要介紹了淺談webpack-dev-server的配置和使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了淺談webpack-dev-server的配置和使用，分享給大家，具體如下：

1安裝的WebPack-dev-server

在終端輸入

npm i webpack-dev-server

安裝webpack-dev-server包

2.配置dev-server

在package.json文件中的腳本中添加代碼

"dev":"WebPack-dev-server --config webpack.config.js”

在webpack.config.js文件中全局添加

target:"web"

終端輸入

npm i cross-env

安裝env

配置環(huán)境變量

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

在webpack.config .JS文件中添加語(yǔ)句

const isDev = process.env.NODE_ENV ==='development'

判斷isDev的值是否與development相等

將module.exports改為常量的配置并添加語(yǔ)句

module.exports = config

可以方便更改配置

在webpack.config.js中添加語(yǔ)句

if（isDev）{
 config.devtool =“＃廉價(jià)模塊-EVAL-源映射”//代碼映射
 config.devServer = {
  port:8000,//啟動(dòng)服務(wù)監(jiān)聽(tīng)端口
  host:'0.0.0.0'，//可以通過(guò)localhost訪問(wèn)
  overlay:{//在頁(yè)面上顯示錯(cuò)誤信息
   errors：true，
   },
   open:true，//啟動(dòng)webpack-dev-server時(shí)自動(dòng)打開(kāi)瀏覽器
   hot:true //啟用熱更
 } 
 config.plugins.push(
  new webpack.HotModuleReplacementPlugin()，
  new webpack.NoEmitOnErrorsPlugin()//熱更相關(guān)插件
 )
}

3.創(chuàng)建HTML頁(yè)面

終端輸入

npm i html-webpack-plugin

安裝html-webpack-plugin插件

在webpack.config.js中添加語(yǔ)句

const HTMLPlugin = require('html-webpack-plugin')

配置

 plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HTMLPlugin()
  ]

完成以上步驟后，終端輸入

npm run dev

打包完畢之后，打開(kāi)瀏覽器，輸入地址本地主機(jī)：8000即可進(jìn)入頁(yè)面

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

通過(guò)JS深度判斷兩個(gè)對(duì)象字段相同
這篇文章主要介紹了通過(guò)JS深度判斷兩個(gè)對(duì)象字段相同，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06
詳解JavaScript中關(guān)于this指向的4種情況
這篇文章主要介紹了JavaScript中關(guān)于this指向的4種情況，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Node版本升級(jí)和降級(jí)完整步驟
這篇文章主要給大家介紹了關(guān)于使用Node版本升級(jí)和降級(jí)的相關(guān)資料,在開(kāi)發(fā)的工程中我們可能需要經(jīng)常切換node版本來(lái)應(yīng)對(duì)不同的開(kāi)發(fā)環(huán)境,所以需要經(jīng)常使用不同版本的node,需要的朋友可以參考下
2023-09-09
Firefox outerHTML實(shí)現(xiàn)代碼
firefox沒(méi)有outerHTML用以下方法解決
2009-06-06
javascript全局變量封裝模塊實(shí)現(xiàn)代碼
javascript全局變量封裝模塊的應(yīng)用，本文將詳細(xì)介紹，需要了解更多的朋友可以參考下
2012-11-11
JavaScript數(shù)組去重的幾種方法效率測(cè)試
JavaScript數(shù)組去重是前端面試酷愛(ài)的問(wèn)題，問(wèn)題簡(jiǎn)單而又能看出程序員對(duì)計(jì)算機(jī)程序執(zhí)行過(guò)程的理解如何。數(shù)組去重的方法有很多，到底哪種是最理想的我不清楚。于是我測(cè)試了下數(shù)組去重的效率。測(cè)試二十萬(wàn)個(gè)數(shù)據(jù)，隨著數(shù)據(jù)越多效率很明顯的就體驗(yàn)了出來(lái)。下面來(lái)一起看看吧。
2016-10-10
JS使用ajax從xml文件動(dòng)態(tài)獲取數(shù)據(jù)顯示的方法
這篇文章主要介紹了JS使用ajax從xml文件動(dòng)態(tài)獲取數(shù)據(jù)顯示的方法,實(shí)例分析了javascript使用Ajax技術(shù)操作XML文件的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
用JS實(shí)現(xiàn)3D球狀標(biāo)簽云示例代碼
3D球狀標(biāo)簽云的效果想必很多朋友在瀏覽網(wǎng)頁(yè)時(shí)都有見(jiàn)到過(guò)吧，看起來(lái)提復(fù)雜的，其實(shí)實(shí)現(xiàn)起來(lái)挺容易的，感興趣的朋友可以了解下本文
2013-12-12
JavaScript+html5 canvas繪制繽紛多彩的三角形效果完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas繪制繽紛多彩的三角形效果,以完整實(shí)例形式分析了html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
JS實(shí)現(xiàn)網(wǎng)頁(yè)煙花動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)煙花動(dòng)畫(huà)效果，點(diǎn)擊鼠標(biāo)煙花向四周擴(kuò)散，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03