這篇文章主要介紹了webpack中配置服務(wù)熱更新如何實(shí)現(xiàn)，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)、網(wǎng)站制作與策劃設(shè)計(jì),精河網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:精河等地區(qū)。精河做網(wǎng)站價(jià)格咨詢:13518219792

配置服務(wù)：熱更新

熱更新的意思是：左邊打開(kāi)瀏覽器，右邊編譯器，當(dāng)編譯器中的內(nèi)容改變，按下ctrl+s，左邊的瀏覽器會(huì)跟著編譯器的內(nèi)容發(fā)生改變

配置devServer

devServer有四個(gè)目錄結(jié)構(gòu)：

const path = require('path')    //path是一個(gè)常量不能更改  ，path 需要引入var webpack = require('webpack')
module.exports = {  // bundle入口
  entry:{
    entry:'./src/entry.js',    //下面的entry是隨便起的名字
    entry2:'./src/entry2.js'    //有兩個(gè)入口也要有兩個(gè)出口
  },  // bundle輸出
  output: {
    path: path.resolve(__dirname, 'dist'),    //絕對(duì)路徑
    filename: '[name].js' //可重命名        當(dāng)有多個(gè)入口文件時(shí)，出口文件用name，說(shuō)明打包的出口文件和入口文件名相同
  },
  module:{},
  plugins:[],
  devServer:{
    contentBase:path.resolve(__dirname,'dist'),
    host:'10.212.109.18',
    compress:true,
    port:8087
  }
}

npm install webpack-dev-server –save-dev 安裝一個(gè)只在開(kāi)發(fā)中使用的 webpack-dev-server

然后輸入webpack-dev-server會(huì)報(bào)出不是內(nèi)部命令，因?yàn)榘惭b到了node_modules里了，找不到，所以需要package.json里scripts里面的內(nèi)容刪除，自己在里面寫  “server”:”webpack-dev-server”

在package.json里面配置好server后輸入：npm run server會(huì)報(bào)錯(cuò)

> y@1.0.0 server F:\webLearn\webpackLearn
> webpack-dev-server

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -Dmodule.js:549
    throw err;
    ^Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (F:\webLearn\webpackLearn\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1npm ERR! y@1.0.0 server: `webpack-dev-server`
npm ERR! Exit status 1npm ERR!
npm ERR! Failed at the y@1.0.0 server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\文件夾名稱\AppData\Roaming\npm-cache\_logs\2018-07-10T08_59_23_339Z-debug.log

原因是找不到  webpack-cli這個(gè)包，所以用 npm install webpack-cli安裝webbpack-cli

安裝完成后執(zhí)行 ==npm run server==會(huì)出現(xiàn)ru下，就大功告成了，復(fù)制你的端口地址在瀏覽器上運(yùn)行即可

如下：

> y@1.0.0 server F:\webLearn\webpackLearn
> webpack-dev-server

i ?wds?: Project is running at http://10.212.109.18:8087/i ?wds?: webpack output is served from /
i ?wds?: Content not from webpack is served from F:\webLearn\webpackLearn\dist
? ?wdm?: Hash: 0a1133d150c765ff1b91
Version: webpack 4.15.1Time: 12622ms
Built at: 2018-07-10 17:01:51
    Asset     Size  Chunks             Chunk Names
entry2.js  139 KiB       0  [emitted]  entry2
 entry.js  139 KiB       1  [emitted]  entry
Entrypoint entry = entry.js
Entrypoint entry2 = entry2.js
 [3] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]
 [4] (webpack)/hot/log.js 1010 bytes {0} {1} [optional] [built]
 [5] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {0} {1} [built]
 [8] ./node_modules/html-entities/index.js 231 bytes {0} {1} [built]
[10] (webpack)-dev-server/client/overlay.js 3.58 KiB {0} {1} [built]
[12] (webpack)-dev-server/client/socket.js 1.05 KiB {0} {1} [built]
[13] ./node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} {1} [built]
[14] ./node_modules/ansi-regex/index.js 135 bytes {0} {1} [built]
[15] ./node_modules/strip-ansi/index.js 161 bytes {0} {1} [built]
[22] ./node_modules/url/url.js 22.8 KiB {0} {1} [built]
[23] (webpack)-dev-server/client?http://10.212.109.18:8087 7.75 KiB {0} {1} [built][24] ./src/entry2.js 23 bytes {0} [built]
[25] multi (webpack)-dev-server/client?http://10.212.109.18:8087 ./src/entry2.js 40 bytes {0} [built][26] ./src/entry.js 60 bytes {1} [built]
[27] multi (webpack)-dev-server/client?http://10.212.109.18:8087 ./src/entry.js 40 bytes {1} [built]
    + 13 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/i ?wdm?: Compiled with warnings.

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享webpack中配置服務(wù)熱更新如何實(shí)現(xiàn)內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

當(dāng)前名稱：webpack中配置服務(wù)熱更新如何實(shí)現(xiàn)
新聞來(lái)源：http://jinyejixie.com/article4/pppsoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、建站公司、ChatGPT、小程序開(kāi)發(fā)、做網(wǎng)站、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)