Webpack 搭建开发环境

介绍

开发环境介绍

开发环境：配置 webpack-dev-server 快速开发应用程序。

作用：启动 web 服务，自动检测代码变化，热更新到网页。

注意：dist目录和打包内容是在内存里（更新快）。

https://webpack.docschina.org/guides/development/

https://webpack.docschina.org/configuration/dev-server/

搭建开发环境的步骤

1）下载 webpack-dev-server 软件包到当前项目。
2）在webpack.config.js中设置模式为开发模式，在package.json中配置自定义命令。
3）使用 npm run dev 来启动开发服务器，查看热更新效果。其中 dev是在package.json文件中配置的自定义命令的名称，使用其它名称也是可以的。

注意：

• webpack-dev-server 借助 Node.js 的 http 模块创建 8080 端口的默认 web 服务。
• 默认以 public 文件夹作为服务器根目录，访问该目录下的index.html文件。
• webpack-dev-server 根据配置，打包相关代码放在内存中，以 webpack.config.js文件中output.path 的值作为服务器根目录（所以自己可以直接拼接访问 dist 目录下的内容，注意访问的是内存中的，跟硬盘上的没有关系）。
  

搭建开发环境示例

下载webpack-dev-server

下载完成后，package.json中自动更新了依赖：

在package.json文件中配置自定义命令

自定义命令中的"dev": "webpack serve --open"的 --open 表示自动弹出默认浏览器。

在webpack.config.js中设置模式为开发模式

配置直接命中打包的页面

在public 目录下新建 index.html文件：

index.html文件的内容：

启动开发环境

自动打开了默认浏览器，并访问配置的页面：

观察代码更改，自动更新