devServer

In addition to the five basic modules, WebACPK also has a devServer module, today to analyze the devServer module.

  • Why do we need devServer in the first place, and what are its application scenarios?

    Application Scenarios: So when we create an HTML file and say Hello World inside it, we use webpack, pack the HTML, and look at the HTML, and it says Hello World, However, when we modify the original HTML file to Hello Hello World again, we need to use the webpack command again to pack, and then we can see the packed HTML effect. As we make more and more changes, this repetitive action becomes very inefficient, which is when we need the devServer provided by WebPackCopy the code

    Function: help us automatically package the code, developers only need to develop the source code on the line, do not have to webpack many times

    Although Webpack provides the webpack –watch command to dynamically monitor file changes and pack them in real time, and output new bundle.js files, it will be very slow to pack when there are too many files. In addition, this packaging method cannot achieve hot replace. Every time WebPack compiles, you need to manually refresh the browser.

    module.exports = {
     entyr: {},output: {},module: {},plugins: [].devServer: {// We configure webpack-dev-server here}}Copy the code

I’ll list a few common items for a complete devServer.

  • ContentBase contentBase, following the example configuration for the path. The join (__dirname, “SRC/HTML”), the follow-up visit http://localhost:3333/index.html, The server will look for the index.html file from SRC/HTML
    // It can take the form of a single address or multiple addresses:
    contentBase: path.join(__dirname, "public")   
    / / multiple:
    contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]  
    // If this parameter is not specified, the project root directory is used by default.
Copy the code

  • Port is the listening port. The default value is 8080.

  • Compress passes a Boolean value to inform the server whether gzip is enabled or not. It is strongly recommended: compression usually reduces the size of responses by about 70%;

  • Hot | hotOnly pass in a Boolean value, inform the server whether to enable HMR.

  • Open automatically opens the default browser after passing a Boolean value to run

  • HTTPS can be passed true to support HTTPS access, as well as custom certificates

   https: true   
   // You can also pass in an object to support custom certificates
   https: {    
         key: fs.readFileSync("/path/to/server.key"),  
         cert: fs.readFileSync("/path/to/server.crt"),  
         ca: fs.readFileSync("/path/to/ca.pem"),}Copy the code
  • Proxy configuration applies when there is another running server (server B) in addition to the server (Server A) of webpack-dev-server. And we want to be able to get access to something on Server B through A relative path to Server A.
Here's an example:devServer: {
        contentBase: path.join(__dirname, "src/html"),
        port: 3333.hot: true.proxy: {
            "/api": "http://localhost:5050"}}Copy the code

After running webpack dev – server, if you visit http://localhost:3333/api/user, is equivalent to visit http://localhost:5050/api/user.

  • Setup Webpack-dev-server’s service application layer uses Express, so you can simulate data backpacking with express app capabilities. Devserver. setup does just that:
 devServer: {
    contentBase: path.join(__dirname, "src/html"),
    port: 3333.hot: true.setup(app){  // Simulate data
        app.get('/getJSON'.function(req, res) {
            res.json({ name: 'vajoy'}); }); }}Copy the code

Then we can achieved by request http://localhost:3333/getJSON simulation data:

Hot update

Webpack-dev-sever supports two automatic refresh modes: Iframe mode and Inline mode.Copy the code

Iframe mode and Inline mode both listen for file changes and then push the compiled file to the front end for reload.

  • Iframe mode

    To use iframe mode, you don’t need to configure anything, just add /webpack-dev-server/ after the port number of the project you start.

    Such as: http://localhost:8080/webpack-dev-server/, only need to use a specific URL access;

    Iframe mode is to embed an Iframe in the web page, and inject our own application into the Iframe, so that the Iframe is reloaded every time you modify the file.

  • Inline mode

    Set the directory of the webpack-dev-server service, if not set, default is the current directory.

Static resource access is a common feature of Webpack-dev-server

  • By default, webpack-dev-server uses build results and output files as resource files for the development server. That is, any file that can be exported through Webpack can be accessed directly. However, if you have static files that are not included in the package that also need to be accessed as resources for the development server, then you need to “tell” webpack-dev-server via additional configuration.

  • You can do this by adding a corresponding configuration to the webpack-dev-server configuration object. We go back to the configuration file and find the devServer property, which is of type an object. We can specify additional static resource paths through the contentBase property of this devServer object. The contentBase property can be a string or array, which means you can configure one or more paths.

Optionally add this parameter to startup on the command line:

webpack-dev-server --content-base ./public
Copy the code

Hot replacement (HMR)

When we use webpack-dev-server’s auto-refresh feature, the browser refreshes the entire page. The difference with hot substitution is that when the current code changes, you don’t need to refresh the entire page, just replace the changed parts.

HMR enables the code to be updated to the page of the browser in time without refreshing the page, so as to avoid the loss of page status.

Enable the HMR function implementation method

HMR is already integrated into the WebPack module, so there is no need to install a separate module.

  1. The easiest way to use this feature is to turn it on with the hot parameter when running the webpack-dev-server command.

  2. You can also enable this function by adding the corresponding configuration in the configuration file. Here we open the configuration file, here we need to configure two places:

    You need to set the hot/hotOnly property in the devServer object to true. You then need to load a plug-in, the plug-in is a plug-in webpack built-in, so we lead into the webpack module, with this module after used here is a named HotModuleReplacementPlugin plug-in.

module.exports = {
  devServer: {
    // Enable HMR. If the resource does not support HMR, it will fallback to live reloading
    hot: true
    // Only use HMR, no fallback to live reloading
    // hotOnly: true
  },
  plugins: [
    // ...
    // A plug-in for the HMR feature
    new webpack.HotModuleReplacementPlugin()
  ]
}
Copy the code

At this point, Webpack can implement hot replacement of CSS; However, it cannot achieve hot replacement of JS, images, etc., which need to be handled manually through the code.

!!!!!!!!! Note here that our CSS loader automatically handles hot updates to style files