Heim > Artikel > Web-Frontend > Was ist ein Hot-Update? Implementierung eines Hot-Updates des Konfigurationsdienstes im Webpack
本篇文章给大家带来的内容是关于什么是热更新?webpack中配置服务热更新的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
热更新的意思是:左边打开浏览器,右边编译器,当编译器中的内容改变,按下ctrl+s,左边的浏览器会跟着编译器的内容发生改变
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
安装完成后执行 ==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.
相关推荐:
Das obige ist der detaillierte Inhalt vonWas ist ein Hot-Update? Implementierung eines Hot-Updates des Konfigurationsdienstes im Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!