什么是热更新？webpack中配置服务热更新的实现-css教程-PHP中文网

配置devServer

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

接着就可以实时热更新了" >接着就可以实时热更新了

首页

web前端

css教程

什么是热更新？webpack中配置服务热更新的实现

不言

Aug 18, 2018 pm 03:27 PM

热更新

本篇文章给大家带来的内容是关于什么是热更新？webpack中配置服务热更新的实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

配置服务：热更新

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

配置devServer

devServer有四个目录结构：

const path = require(&#39;path&#39;)    //path是一个常量不能更改  ，path 需要引入var webpack = require(&#39;webpack&#39;)
module.exports = {  // bundle入口
  entry:{
    entry:&#39;./src/entry.js&#39;,    //下面的entry是随便起的名字
    entry2:&#39;./src/entry2.js&#39;    //有两个入口也要有两个出口
  },  // bundle输出
  output: {
    path: path.resolve(__dirname, &#39;dist&#39;),    //绝对路径
    filename: &#39;[name].js&#39; //可重命名        当有多个入口文件时，出口文件用name，说明打包的出口文件和入口文件名相同
  },
  module:{},
  plugins:[],
  devServer:{
    contentBase:path.resolve(__dirname,&#39;dist&#39;),
    host:&#39;10.212.109.18&#39;,
    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 &#39;webpack-cli&#39; 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 &#39;webpack-cli/bin/config-yargs&#39;
    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 &#39;mode&#39; option has not been set, webpack will fallback to &#39;production&#39; for this value. Set &#39;mode&#39; option to &#39;development&#39; or &#39;production&#39; to enable defaults for each environment.
You can also set it to &#39;none&#39; to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/i ｢wdm｣: Compiled with warnings.

登录后复制