啥是热更新？webpack中设置服务热更新的完成1

啥是热更新？webpack中设置服务热更新的完成

[摘要]本篇文章给大家带来的内容是关于什么是热更新？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

> 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中设置服务热更新的完成

配置服务：热更新

配置devServer

原因是找不到 webpack-cli这个包，所以用 npm install webpack-cli安装webbpack-cli

接着就可以实时热更新了