关于前端:搭建本地开发服务器

搭建本地开发服务器

原文链接：https://note.noxussj.top/?source=sifo

搭建本地开发服务器这一个环节是十分有必要的，咱们不可能每次批改源代码就从新打包一次。这样的操作是不是太繁琐了。所以本地开发服务器的作用就能体现了，它会主动监听咱们的入口文件所关联的文件是否有变动，如果有则主动进行打包操作。

1. 通过命令 yarn add webpack-dev-server 装置 webpack 本地开发服务器插件。

2. 在之前 webpack.config.js 配置的根底上额定增加本地开发服务器配置。

module.exports = {
    /**
     * 开发服务器
     */
    devServer: {
        port: 8000, // 启动的端口号
        open: true // 启动服务后主动关上浏览器
    }
}

3. 新建 public 文件夹，这个名称是固定的。把 index.html 文件挪动到该目录下，并且批改 bundle.js 门路。

4. 通过命令 npx webpack-dev-server 运行本地开发服务器，运行后页面会主动关上。

5. 尝试批改款式文件 styles/index.scss 将 $height 改为 50px。

6. 保留款式文件后间接拜访方才关上的页面，能够看到曾经实时更新了。

原文链接：https://note.noxussj.top/?source=sifo