DevServer

DevServer is widely used in Webpack. It can enhance debugging during project development by setting up an Express service locally and deploying and running the project. To enable DevServer, you need to install the Webpack dev server dependency module. DevServer has many rich configurations that can meet most scenarios. You can use DevServer by running the Webpack dev server command. The default read service configuration is webpack.config.js like the default configuration file of Webpack. You can use Webpack dev server -- config file_ Path command to specify the path to the service configuration file.

ContentBase

When the local service runs successfully, it will read and load resources as the file root directory of the server according to the value of ContentBase. It defaults to the current execution Directory:

const path = require("path");
module.exports = {
    /* Other configurations */
    devServer: {
        contentBase: path.join(__dirname, "dist"),
    }
}

Compress

Compress is used to configure whether the service adopts Gzip compression. Its value type is Boolean. The default is false:

module.exports = {
    /* Other configurations */
    devServer: {
        compress: true,
    }
}

Port

Port indicates the listening port when the service is running. The default is 8080. If port 8080 is occupied, port 8081 will be used, and so on:

module.exports = {
    /* Other configurations */
    devServer: {
        port: 8083
    }
}

Host

The Host specifies the address that the server listens to. The default is 127.0.0.1. If you want to access the service from devices in the same LAN, you need to configure it to 0.0.0.0:

module.exports = {
    /* Other configurations */
    devServer: {
        host: "0.0.0.0"
    }
}

Hot

The default behavior of DevServer is to refresh the whole page after the source code is modified to realize real-time preview. When Hot is set to true, module Hot replacement is enabled. After the source code is changed, replace the old module with a new module without refreshing the page. Real-time preview:

module.exports = {
    /* Other configurations */
    devServer: {
        hot: true
    }
}

HistoryApiFallback

When developing a single page application, if the HTML5 History API is used to control route switching, different routes need to request a new view to be displayed on the same HTML page. By default, resource requests sent by route switching will cause 404 errors. The function of HistoryApiFallback is to return the index.html file resources when you switch routes to avoid resource loading errors:

module.exports = {
    /* Other configurations */
    devServer: {
        historyApiFallback: true,
    },
}

When developing multiple pages, in order to ensure that each route returns a different HTML file, fine control the loading of resources corresponding to the route by passing in an object and using the Rewrites option:

module.exports = {
    /* Other configurations */
    devServer: {
        historyApiFallback: {
            rewrites: [
                { from: /^\/$/, to: '/views/landing.html' },
                { from: /^\/subpage/, to: '/views/subpage.html' },
                { from: /./, to: '/views/404.html' }
            ]
        }
    },
}

Open

Open indicates whether the default browser needs to be opened automatically when the server is running. The default is false. When it is set to true, the service will automatically open the browser and load relevant resources for display:

module.exports = {
    /* Other configurations */
    devServer: {
        open: true
    },
}

The command webpack dev server -- open is the same as the configuration function. Use openPage to load the page with the specified path.

Https

By default, DevServer uses Http services. Sometimes it must use Https services. For example, use service worker (in principle, service worker can only be used under Https services. In order to support local debugging, it can also be used in localhost service). You can also build a local Https service:

module.exports = {
    /* Other configurations */
    devServer: {
        https: true,
    },

}

The above settings use the built-in self signing certificate. You can provide your own signing certificate:

module.exports = {
    /* Other configurations */
    devServer: {
        https: {
            key: fs.readFileSync("/path/to/server.key"),
            cert: fs.readFileSync("/path/to/server.crt"),
            ca: fs.readFileSync("/path/to/ca.pem"),
        }
    },
}

This chapter provides case source code download: https://gitee.com/mvc_ydb/webpack/blob/master/devServer.zip