webpack5打包其他资源以及devServer的配置方式

webpack5打包其他资源

先说清楚什么是“其他资源”——简单点说，就是那些不需要你做压缩、优化等额外处理，只需要原封不动输出到打包目录里的文件，比如字体图标这类东西。听起来是不是很省心？确实，它们天生就该被“原样搬运”。

那么，怎么把这些资源也丢进打包流程里呢？传统的做法是用file-loader来处理。关键是怎么识别它们？其实思路很简单：把已知的、需要特殊处理的资源类型都排除掉，剩下的自然就是“其他资源”了。一个很实用的写法是，用exclude排除掉html、css、js、less等常见文件（具体根据你的实际项目来调整），剩下的全部交给file-loader。

// 打包其他资源(除了html，js,css，less等资源以外的资源)
{
    // 使用exclude排除html，js,css，less等资源
    exclude: /\.(css|html|js|less|png|jpg|gif)$/,
    loader: 'file-loader'
}

这样配置完，项目里的.svg、.eot、.woff这些字体图标文件，就能乖乖地被复制到打包目录里了。

devServer：开发者的“自动挡”

之前的流程大家应该深有体会——每次改完代码，都得手动执行一遍webpack命令重新编译打包，然后刷新浏览器看看效果。改一行，重复一遍，枯燥又低效。好在webpack提供了devServer，它能帮你把这件事变成“全自动”：第一次打包完成后，只要你修改了代码，它就会自动重新编译并刷新浏览器，开发者只需要专注于写代码，剩下的事情交给它就好。

使用devServer需要安装一个额外依赖：webpack-dev-server。装好之后，我们来看看它在不同版本中的配置差异。

webpack4中的配置

// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
devServer: {
    // 项目构建后的路径，也就是代码要运行的项目目录
    contentBase: resolve(__dirname, 'build'),
    //compress是否启动gzip压缩，让代码体积更小，速度更快
    compress: true,
    // 制定开发服务器的端口号
    port: 3000,
    // open是否自动打开浏览器，打开的是默认浏览器。
    open: true,
    hot: true
}

webpack5中的配置

// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
devServer: {
    // 项目构建后的路径，也就是代码要运行的项目目录
    static: resolve(__dirname, 'build'),
    //compress是否启动gzip压缩，让代码体积更小，速度更快
    compress: true,
    // 指定开发服务器的端口号
    port: 3000,
    // open是否自动打开浏览器，打开的是默认浏览器。
    open: true,
    hot: true
}

细心的读者应该注意到了，两个版本最核心的区别在于项目根路径的配置项：webpack4用的是contentBase，而webpack5改成了static。除此之外，其余选项（gzip压缩、端口号、自动打开浏览器、模块热替换）基本保持一致。

一切配置妥当后，在终端执行npx webpack-dev-server，浏览器就会自动打开。之后你改任何代码，页面都会即时刷新，再也不用重复“编译-刷新”这个机械动作了。这才是现代前端开发该有的节奏。

总结

本质上，打包其他资源的核心思路就是“排除法”加file-loader；而devServer则是把开发体验提升到了“热更新+自动刷新”的层面。这两个知识点在实际项目中几乎天天用到，理解它们背后的逻辑，比死记配置参数更有价值。