What is a hot update? Implementation of Configuration service hot update in Webpack

This article brings you to the content of what is the hot update? Webpack Configuration Service Hot Update implementation, there is a certain reference value, the need for friends can refer to, I hope to help you.

Configuration services: Hot update

Hot update means: Left open browser, right compiler, when the compiler content changes, press Ctrl+s, the left side of the browser will follow the compiler's content changes

Configure Devserver

Devserver has four directory structures:

const path = require ('path') // path is a constant and cannot be changed, path needs to introduce var webpack = require ('webpack')
module.exports = {// bundle entry
   entry: {
     entry: './ src / entry.js', // The entry below is a random name
     entry2: './ src / entry2.js' // There are two entries and two exits
   }, // bundle output
   output: {
     path: path.resolve (__ dirname, 'dist'), // absolute path
     filename: '[name] .js' // can be renamed When there are multiple entry files, the export file uses name, indicating that the packaged export file has the same name as the entry file
   },
   module :(),
   plugins: [],
   devServer: {
     contentBase: path.resolve (__ dirname, 'dist'),
     host: '10 .212.109.18 ',
     compress: true,
     port: 8087
   }
}

NPM Install Webpack-dev-server–save-dev installs a webpack-dev-server that is only used in development

Then input Webpack-dev-server will be reported not internal command, because installed into the node_modules, can not find, so need to package.json inside scripts content Delete, oneself in the inside write " Server ":" Webpack-dev-server "

After configuring server in Package.json, enter:npm run server will error.

> 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 \ folder name \ AppData \ Roaming \ npm-cache \ _logs \ 2018-07-10T08_59_23_339Z-debug.log

The reason is that WEBPACK-CLI is not found in this package, so use NPM install WEBPACK-CLI installation webbpack-cli

After the installation is complete, execute ==NPM run server== will appear under RU, you are done, copy your port address to run on the browser

As follows:

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

can then be hot updated in real time