什麼是熱更新?webpack中佈建服務熱更新的實現

來源:互聯網
上載者:User
本篇文章給大家帶來的內容是關於什麼是熱更新?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-serverThe 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 ELIFECYCLEnpm 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-serveri 「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: 0a1133d150c765ff1b91Version: webpack 4.15.1Time: 12622msBuilt at: 2018-07-10 17:01:51    Asset     Size  Chunks             Chunk Namesentry2.js  139 KiB       0  [emitted]  entry2 entry.js  139 KiB       1  [emitted]  entryEntrypoint entry = entry.jsEntrypoint 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 modulesWARNING in configurationThe '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.
接著就可以即時熱更新了
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.