前言
Webpack 是一个强大的前端打包工具， 它可以将多个资源文件打包成一个或多个静态资源文件。在使用 Webpack 进行打包时，可能会遇到 “样式文件路径错误”的问题。本篇文章将会介绍如何在 Webpack 中解决这个问题。
问题描述
在 Webpack 中，解析样式文件路径的方式有两种，分别是相对路径和绝对路径。相对路径是相对于入口文件（entry）的路径，而绝对路径则是相对于根目录（root）的路径。当 Webpack 打包后，样式文件路径通常会出现错误。
例如，在开发环境中，我们可以这样编写样式文件的路径：
body { background: url('./image/bg.png'); }
当 Webpack 打包完成后，样式文件的路径就变成了：
body { background: url('image/bg.png'); }
这时候，浏览器就无法加载该文件，从而显示错误。
解决方法
为了解决样式文件路径错误的问题，我们可以使用 Webpack 中的 publicPath 和 ExtractTextPlugin 两个属性。
publicPath
publicPath 是 Webpack 的一个配置项，用于设置资源文件的访问路径。当使用相对路径作为资源文件路径时，publicPath 可以为这些资源指定一个基础路径，并在前面添加一个前缀来定义路径。例如：
// webpack.config.js module.exports = { output: { publicPath: '/', }, };
在这个例子中，publicPath 设置为 /，这样在后续使用相对路径时，就会自动添加 / 前缀。例如：
body { background: url('image/bg.png'); }
在打包后的文件中，路径将变为：
body { background: url('/image/bg.png'); }
这个路径就是正确的了。
ExtractTextPlugin
ExtractTextPlugin 是一个 Webpack 插件，它可以将入口文件中引用的 CSS 文件提取成一个单独的 CSS 文件，这样将 CSS 文件单独打包后，就可以避免样式文件路径错误的问题。
使用 ExtractTextPlugin 插件需要先安装：
npm install --save-dev extract-text-webpack-plugin
然后在 Webpack 配置文件中进行配置：
-- -------------------- ---- ------- -- ----------------- ----- ----------------- - --------------------------------------- -------------- - - ------- - ------ - - ----- --------- ---- --------------------------- ---- --------------- --------- ----------------- --- -- -- -- -------- - --- -------------------------------- -- --展开代码
在这个例子中，当 Webpack 打包解析到 .css 文件时，会使用 ExtractTextPlugin 插件将其提取成一个单独的 CSS 文件。new ExtractTextPlugin('styles.css') 将 CSS 文件命名为 styles.css。
通过配置 ExtractTextPlugin，我们可以将引用的 CSS 文件单独打包，在打包后的文件中使用正确的路径。
示例代码
-- -------------------- ---- ------- -- ----------------- ----- ----------------- - --------------------------------------- -------------- - - ------ ----------------- ------- - ----- ----------------------- -------- --------- ------------ ----------- ---- -- ------- - ------ - - ----- --------- ---- --------------------------- ---- --------------- --------- ----------------- --- -- -- -- -------- - --- -------------------------------- -- --展开代码
结语
在本文中，我们介绍了 Webpack 中解析样式文件路径错误的问题，并详细介绍了解决方法。通过使用 publicPath 和 ExtractTextPlugin 这两个配置项，我们可以避免在 Webpack 打包后出现样式文件路径错误的问题，进而提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c6be86cf1e9924e1f20219
