从零开始搭建一个前端框架（三）完成代码本地启动和热更新

说在前面

前端框架一般都会提供给我们build和serve两个服务，上一章节我们大致了解了build，现在我们利用webpack来完成serve，也就是本地启动前端服务。

通过本章，我们需要实现前端代码的运行以及热更新功能。

源代码参考

webpack-dev-server

安装：

npm install webpack-dev-server --save-dev

安装好了以后，为了方便以后的操作，可以在package.json中再添加一个操作命令：

"scripts": {
   //...
    "serve": "webpack-dev-server"
},

这里，我们可以尝试执行一下 npm run serve命令，看看会发生什么。切记要自己操作。

现在项目运行起来了，默认的端口是8080。

当我们开始访问，并没有得到我们想要的结果，可以发现页面上展示的依旧是{{message}}，为什么引入的js文件没有生效呢？我们打开f12来看看报错信息：

提示，src/index.js文件 404 not found ，这就奇怪了，文件明明就是在这个目录下呀！这个时候我们就要发现webpack-dev-server的工作原理了。

原来，当运行serve命令时，并不会像build一样生成一个指定目录的文件，而是将生成的打包文件放置到内存中，可以访问的地址就是localhost:8080（默认），所以我们在index.html中访问的js文件地址应该为/index.bundle.js，值得注意的是，直接访问localhost:8080，会自动访问index.html文件，所以不需要添加其他访问路径这里访问的规则也是遵从我们生成文件的规则。我们修改index.html:

<script src="/index.bundle.js"></script>

重新执行npm run serve，这时再访问系统，发现出现了一些错误，有戏了，应该是能正常访问文件了，错误提示：

原来是访问文件的大小收到了限制，我们的index.bundle.js文件太大了，所以我们要修改默认的大小限制，修改webpack.config.js：

module.exports = {
    // mode: "development",
    mode: "production",
    performance: {
        maxEntrypointSize: 400000,
        maxAssetSize: 300000
    },
    ...
}

好的，此时我们再重新执行npm run serve，可以发现，直接访问localhost:8080就可以看到我们希望的效果了。

这时我们修改一下index.js，

return{
    message: 'Hello @Vue!'
}

稍等片刻，我们发现页面也同步发生了变化，此时我们就完成了简单的运行和热更新功能。

再攀高峰

当你凝视深渊的时候，深渊也在凝视你。当我们一切都使用默认配置时，有很多的不确定性，所以我们尝试着完成一些自定义配置。

端口

配置port选项，默认8080。

自动打开浏览器

配置open选项，默认false。

热更新

配置hot选项，默认true，高版本的devserver无需单独配置该项了。

浏览器中的错误提示

配置overlay选项，可以更加细化，比如只显示错误信息，而不展示报警信息。

配置代理

配置proxy选项，配置代理的作用就是，一些请求不支持跨域访问，需要通过代理来完成请求转发。详情可以参考：

前端配置代理解决跨域问题

以上是几个比较常用的选项，更多配置项可以参考官方网站, 如下：webpack.config.js。

devServer: {
    port: 3000,
    client: {
        overlay: {
            errors: true,
            warnings: false,
        },
    },
},

说到最后

后续内容随缘更新，大家想了解哪些内容也可以留言！