webpack5打包其他资源以及devServer的配置方式
作者：Celester_best
文章介绍了Webpack5打包其他资源的方法,使用file-loader处理不需要处理的资源,并通过exclude排除已处理的资源类型,同时,文章详细讲解了Webpack的devServer功能,它可以帮助开发者在修改代码后自动编译、刷新浏览器,从而提高开发效率
webpack5打包其他资源
其他资源：其他资源指一些不需要做任何处理（例如不需要压缩，优化等处理），只需要原封不动的输出，比如字体图标
打包其他资源可以用file-loader
其他资源应该怎么识别呢？我们可以使用exclude排除html、css、js、less等资源（这个根据实际项目进行排除），剩余的为其他资源。
// 打包其他资源(除了html，js,css，less等资源以外的资源)
{
// 使用exclude排除html，js,css，less等资源
exclude: /\.(css|html|js|less|png|jpg|gif)$/,
loader: 'file-loader'
}devServer
通过前面的学习，我们可以发现每次修改代码之后，我们都需要在执行webpack命令重新编译打包，很不方便。
devServer可以帮助我们解决这个问题，只要编译打包过之后，我们再修改代码，devserver就会自动帮我们编译打包，自动刷新浏览器。
devServer需要webpack-dev-server库，安装webpack-dev-server
webpack4中devServer的配置
// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
devServer: {
// 项目构建后的路径，也就是代码要运行的项目目录
contentBase: resolve(__dirname, 'build'),
//compress是否启动gzip压缩，让代码体积更小，速度更快
compress: true,
// 制定开发服务器的端口号
port: 3000,
// open是否自动打开浏览器，打开的是默认浏览器。
open: true,
hot: true
}webpack5中devServer的配置
// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
devServer: {
// 项目构建后的路径，也就是代码要运行的项目目录
static: resolve(__dirname, 'build'),
//compress是否启动gzip压缩，让代码体积更小，速度更快
compress: true,
// 指定开发服务器的端口号
port: 3000,
// open是否自动打开浏览器，打开的是默认浏览器。
open: true,
hot: true
}执行npx webpack-dev-server命令之后，会自动打开浏览器，如果修改了代码之后，浏览器也会自动刷新，不需要值重新打包编译。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。