Webpack Study Notes (iii) Webpack-dev-server plugin and Hotmodulereplacementplugin plugin use

Webpack-dev-server Plug-in

Webpack-dev-server is a small Express server that is officially provided by Webpack. Use it to provide a Web service for the resource files generated by the Webpack package.

Webpack-dev-server provides two main functions:

• Service for static files
• Auto Refresh and Hot swap (HMR)

Hotmodulereplacementplugin Plug-in

Hotmodulereplacementplugin is mainly used for code hot replacement (the specific use is not clear, because there is no research transparent bar)

First, Webpack-dev-server plug-in description

Installation:

Enter NPM webpack-dev-server-g execution in cmd;

Start:

Enter webpack-dev-server execution in CMD;

Additional parameter configuration

Adding Devserver configuration items in Webpack.config.json

The configuration parameters are described below:

• --content-base <file/directory/url/port>: Base path for the content.
• --quiet: Don ' t output anything to the console.
• --no-info: Suppress boring information.
• --colors: Add some colors to the output.
• --no-colors: Don ' t use colors in the output.
• --compress: Use gzip compression.
• --host : hostname or IP. 0.0.0.0binds to all hosts.
• --port <number>: Port.
• --inline: Embed the Webpack-dev-server runtime into the bundle.
• --hot: Adds the and switch the server to Hot HotModuleReplacementPlugin mode. Note:make sure you don ' t add HotModuleReplacementPlugin twice.
• --hot --inlineAlso adds the webpack/hot/dev-server entry.
• --public: Overrides the host and port used in --inline mode for the client (useful for a VM or Docker).
• --lazy: No watching, compiles on request (cannot is combined with --hot ).
• --https: Serves webpack-dev-server over HTTPS Protocol. Includes a self-signed certificate that's used when serving the requests.
• --cert, --cacert , --key : Paths the certificate files.
• --open: Opens the URL in default browser (for Webpack-dev-server versions > 2.0).
• --history-api-fallback: Enables support for the history API fallback.
• --client-log-level: Controls the console log messages shown in the browser. Use error , warning , info or none .

Webpack-dev-server For more information, see here

HotModuleReplacementPlugin

(Follow-up supplement)

Webpack Study Notes (iii) Webpack-dev-server plugin and Hotmodulereplacementplugin plugin use