Webpack

搭建开发环境

问题：之前改代码，需重新打包才能运行查看，效率很低

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

文档：开发环境 | webpack 中文文档

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

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

步骤：

1.下载webpack-dev-server软件包到当前项目

npm i webpack-dev-server --save-dev

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

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

3.使用npm run dev来启动开发服务器，试试热更新效果

webpack-dev-server借助http模块创建8080默认Web服务

默认以public文件夹作为服务器根目录，去显示里面名字为index的网页，如果没有该网页，则会显示成如上图，所以要加具体名称去访问页面

问题：没有css样式和js效果

解决：webpack-dev-server根据配置，打包相关代码在内存当中，以output.path的值作为服务器根目录，所以可以直接自己拼接访问dist目录下内容

打包之后自动打开某页面：在public文件夹下新建index.html文件

打包模式

打包模式：告知Webpack使用相应模式的内置优化

分类：

设置：

方式1：在webpack.config.js配置文件设置mode选项

方式2：在package.json命令行设置mode参数

注意：命令行设置的优先级高于配置文件中的，推荐使用命令行设置

优化：把main.css打包进login文件夹中

解决：在webpack.config.js文件中找到MiniCssExtractPlugin添加如下代码，路径一定要写相对路径，否则会报错