webpack中配置服务热更新如何实现

这篇文章主要介绍了webpack中配置服务热更新如何实现，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

配置服务：热更新

热更新的意思是：左边打开浏览器，右边编译器，当编译器中的内容改变，按下ctrl+s，左边的浏览器会跟着编译器的内容发生改变

配置devServer

devServer有四个目录结构：

const path = require('path')    //path是一个常量不能更改  ，path 需要引入var webpack = require('webpack')
module.exports = {  // bundle入口
  entry:{
    entry:'./src/entry.js',    //下面的entry是随便起的名字
    entry2:'./src/entry2.js'    //有两个入口也要有两个出口
  },  // bundle输出
  output: {
    path: path.resolve(__dirname, 'dist'),    //绝对路径
    filename: '[name].js' //可重命名        当有多个入口文件时，出口文件用name，说明打包的出口文件和入口文件名相同
  },
  module:{},
  plugins:[],
  devServer:{
    contentBase:path.resolve(__dirname,'dist'),
    host:'10.212.109.18',
    compress:true,
    port:8087
  }
}

npm install webpack-dev-server –save-dev 安装一个只在开发中使用的 webpack-dev-server

然后输入webpack-dev-server会报出不是内部命令，因为安装到了node_modules里了，找不到，所以需要package.json里scripts里面的内容删除，自己在里面写  “server”:”webpack-dev-server”

在package.json里面配置好server后输入：npm run server 会报错

> 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这个包，所以用 npm install webpack-cli安装webbpack-cli

安装完成后执行 ==npm run server==会出现ru下，就大功告成了，复制你的端口地址在浏览器上运行即可

如下：

> 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.

感谢你能够认真阅读完这篇文章，希望小编分享webpack中配置服务热更新如何实现内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!