webpack中配置服務(wù)熱更新如何實(shí)現(xiàn)

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

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

熱更新的意思是：左邊打開瀏覽器，右邊編譯器，當(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è)只在開發(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í)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!