Webpack 是一个强大的前端打包工具，可以将多个模块打包成一个或多个文件，方便前端开发。但是在实际使用中，我们会遇到各种各样的问题。本文将介绍 webpack 打包静态资源时常见的坑及其解决方法。
1. 静态资源路径问题
在使用 webpack 打包静态资源时，有时候会遇到资源路径错误的问题。这是因为 webpack 默认会将所有的静态资源都打包到输出目录下的根目录，而我们在编写代码时使用的相对路径可能会有问题。
解决方法：
- 使用
publicPath配置项
module.exports = {
output: {
publicPath: '/assets/'
}
}这样，webpack 打包后的静态资源路径就会以 /assets/ 开头。
- 使用
resolve.alias配置项
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}这样，我们在代码中使用 @ 作为别名，就可以方便地引用静态资源了。
2. 静态资源文件名问题
在使用 webpack 打包静态资源时，有时候会遇到文件名错误的问题。这是因为 webpack 默认会将所有的静态资源文件名都使用 hash 值命名，而我们在编写代码时可能需要使用固定的文件名。
解决方法：
- 使用
output.filename配置项
module.exports = {
output: {
filename: '[name].js'
}
}这样，webpack 打包后的静态资源文件名就会和源文件名一样了。
- 使用
file-loader或url-loader配置项
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ---------
-
-
-
-
-
-
-这样，webpack 打包后的图片文件就会以源文件名命名，并且输出到 images/ 目录下。
3. CSS 文件中的图片路径问题
在使用 webpack 打包 CSS 文件时，有时候会遇到图片路径错误的问题。这是因为 CSS 文件中的图片路径是相对于 CSS 文件本身的路径，而不是相对于 HTML 文件的路径。
解决方法：
- 使用
css-loader配置项
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------------- -
-
--
----------------
-
--
-
----- -------------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ---------
-
-
-
-
-
-
-这样，在 CSS 文件中引用图片时，就可以使用相对路径了。
结语
Webpack 是一个非常强大的前端打包工具，但是在使用过程中也会遇到各种各样的问题。本文介绍了 webpack 打包静态资源时常见的坑及其解决方法，希望对大家有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cc8ce6e46428fe9e5c603d