1.作用

它可以为我们创建一个本地服务，并提供地址。每次修改源代码后它会进行 热模块替换。

文章目录

热模块替换：只更新变更内容，以节省宝贵的开发时间。

打包好的内容是保存在内存中的，所以它在不经过配置的情况下，不会产生新的文件夹。

这样我们就无需每次先执行命令去打包，然后在预览生成的 html 文件了。而是直接访问提供的地址预览即可。

2.安装及使用

// 安装命令
npm install webpack-dev-server -D

// 启动命令
npx webpack serve

在安装之后，在 webpack 配置文件中新建 devServer 配置项。

热模块替换默认是开启的，如果需要关闭只需要设置 hot:false。

我们还可以在此处配置代理，去解决跨域的问题。

module.exports = {
    devServer: {
        // 自动打开浏览器
        open: true,
        // 设置服务的端口号
        port: 8000,
        // 设置gzip压缩
        compress: true,
        // 代理
        proxy: {
            '/api': {
                // 访问 /api 就等于访问 http://localhost:3000
                target: 'http://localhost:3000',
                // 将 /api 前缀替换成空字符串
                pathRewrite: { '^/api': '' },
            },
        },
    }
};

3.修改 CSS 后报错：

报错内容：because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

不知道为什么，如果在 MiniCssExtractPlugin 插件中为 filename 设置[hash] | [contenthash]后，那么就会报此错误。

将名称中的哈希值去掉后就正常了。

其实不止 CSS 有问题，我发现如果文件名如果带有哈希值，那么在开发实时预览的时候，貌似都有一些问题，建议在生产打包的时候在添加哈希值名称。

4.修改 HTML 后不重加载：

在使用 htmlWebpackPlugin 设置模板后，修改模板内容时不会进行重新加载，只有手动刷新后才能看到最新内容。

可以在 devServer 配置中监听着该模板文件。

module.exports = {
    devServer: {
        watchFiles: ['src/index.html'],
    }
};