在前端项目中，我们经常需要引用各种资源，比如样式表、图片、字体等。但是在不同的环境下，这些资源的路径可能是不同的。为了解决这个问题，我们可以使用 webpack 中的资源前缀处理功能。
资源前缀处理的作用
当我们在开发环境中引用资源时，一般会使用相对路径，例如：
<link rel="stylesheet" href="style.css">
但是在生产环境中，我们需要把静态资源文件打包到一个单独的目录中，以便于管理和缓存，这时候再使用相对路径就会有一些问题了。
比如，假设我们在生产环境中把静态资源文件打包到了 dist 目录下，那么上面的样式表链接就应该改成：
<link rel="stylesheet" href="dist/style.css">
但是这样的写法很容易出现错误，例如当我们在不同的页面中引用了不同的子目录中的资源时，就需要手动修改路径，非常麻烦。而且，如果我们修改了资源文件的目录，还需要修改所有的链接地址，非常容易出错。
为了解决这个问题，我们可以使用 webpack 的资源前缀处理功能，在打包静态资源文件时，自动为资源文件添加前缀。这样，我们就可以使用相对路径来引用静态资源文件，而不需要手动修改链接地址了。
如何配置资源前缀处理
webpack 提供了一个 output.publicPath 配置项，用于设置资源文件的公共路径前缀。通过配置这个选项，我们就可以为资源文件添加前缀了。
module.exports = { // ... output: { publicPath: '/' } // ... }
上面的配置就将公共路径前缀设置为根路径 /。此时 webpack 会自动为静态资源文件添加前缀，例如 style.css 的链接就会变成：
<link rel="stylesheet" href="/style.css">
当我们将应用部署到某个子目录中时，只需要将 publicPath 配置为相应的子目录路径即可。
module.exports = { // ... output: { publicPath: '/myapp/' } // ... }
此时，静态资源文件的链接就会变成：
<link rel="stylesheet" href="/myapp/style.css">
更多细节配置
除了上面提到的 output.publicPath 配置项，webpack 还提供了一些其他配置选项，用于更细粒度的控制资源前缀处理方式。
output.crossOriginLoading
该配置选项用于设置资源的的 CORS（Cross-Origin Resource Sharing，跨源资源共享）策略。
module.exports = { // ... output: { crossOriginLoading: 'anonymous' } // ... }
上面的配置表示使用匿名凭证加载所有同源资源文件。
output.chunkFilename
该配置选项用于设置打包后生成的 chunk 文件的文件名。例如：
module.exports = { // ... output: { chunkFilename: '[name]-[chunkhash].js' } // ... }
上面的配置表示每个生成的 chunk 文件的文件名由 name 和 chunkhash 组成。这样做的好处是，每次打包后生成的文件名都不一样，可以避免浏览器缓存的问题。
output.library
该配置选项用于配置一个库的名称。例如：
module.exports = { // ... output: { library: 'mylib' } // ... }
上面的配置表示打包后的代码会将一个全局对象赋值为 mylib。
示例代码
现在我们来看一个完整的 webpack 配置文件，其中包含了资源前缀处理的配置。这是一个基于 React 的简单应用，用于展示一些评论列表。
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ ----------------- ------- - ----- ----------------------- -------- --------- ------------ ----------- --- -- ------- - ------ - - ----- -------------- -------- --------------- ---- - ------- -------------- - -- - ----- --------- ---- ---------------- ------------- -- - ----- ------------------- ---- - - ------- -------------- -------- - ----- -------------- - - - - - -- -------- - ----------- ------- ------- -- ---------- - ------------ --------- ----- ----- ------------------- ---- - --展开代码
在上面的代码中，output.publicPath 配置为 /，表示将公共路径前缀设置为根路径。
当我们使用 file-loader 处理图片资源时，file-loader 会自动给每个图片文件添加公共路径前缀。
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - -- --- - ----- ------------------- ---- - - ------- -------------- -------- - ----- -------------- - - - - - - -- --- -展开代码
在应用中引用图片时，只需要使用相对路径即可，例如：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---- ---- ------------- -- ---- -------- ----- - ------ - ---- ---------------- ------- ----------------------- ---- ---------- -------------------- ---------- -- --- ------ --- --- ---- ----------------------- --- ---- -- ------- ---- -- -------------------- -------------------------- --------------- ------------- ----------- - ----- ----- ---- --------- ------ -- - ------ ------- ----展开代码
小结
webpack 的资源前缀处理功能可以帮助我们自动为静态资源文件添加前缀，避免手动修改链接地址的麻烦。同时，webpack 还提供了许多其他的配置选项，用于更细粒度的控制资源前缀处理方式。我们只需要根据实际需求进行配置即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb7c34306f20b3a6b11652
