将代码存放在文件夹中，分别放在webpack-dev-server中

是一种常见的前端开发流程。下面是对这个流程的详细解释：

1. 代码存放在文件夹中：在前端开发中，通常将不同功能或模块的代码存放在不同的文件夹中，以便于管理和维护。这样可以将相关的文件组织在一起，方便团队协作和代码复用。
2. webpack-dev-server：webpack-dev-server是一个基于webpack的开发服务器，用于在开发过程中提供实时的编译和热更新功能。它可以监视文件的变化并自动重新编译，同时在浏览器中实时展示最新的页面效果。webpack-dev-server还支持代理、模块热替换等功能，极大地提高了开发效率。

在这个流程中，可以按照以下步骤进行操作：

1. 创建文件夹结构：根据项目的需求，创建相应的文件夹结构，例如将HTML文件放在一个文件夹中，将CSS文件放在另一个文件夹中，将JavaScript文件放在另一个文件夹中。
2. 配置webpack：在项目根目录下创建webpack配置文件（通常为webpack.config.js），配置入口文件、输出路径、加载器、插件等。可以使用webpack的多入口配置，将不同功能或模块的代码分别指定为入口文件。
3. 安装webpack-dev-server：使用npm或yarn安装webpack-dev-server，并在webpack配置文件中进行相应的配置。配置项包括监听的端口、代理设置、热更新等。
4. 启动webpack-dev-server：在命令行中执行启动命令，例如webpack-dev-server --config webpack.config.js，webpack-dev-server会自动编译代码并启动开发服务器。
5. 访问页面：在浏览器中访问指定的URL（通常是http://localhost:8080），即可查看项目的页面效果。webpack-dev-server会自动监视文件的变化，并在代码保存后进行实时更新。

总结：

将代码存放在文件夹中，分别放在webpack-dev-server中是一种常见的前端开发流程。通过使用webpack-dev-server，开发者可以方便地进行代码的编译、热更新和实时预览，提高开发效率。