1. 写在前面
在一些基于Webpack的项目中，我们可能会遇到这个情况：使用本地开发服务器开发项目的时候，项目可以正常运行，所需要的资源也能正常请求到。但是项目经打包编译，部署到服务器上之后，会报错一些 404 的错误，显示一些图片文件、css文件或js文件等找不到。
这是因为打包后的项目文件的引用路径问题，如果我们不做额外配置，打包编译后得到的 .html 文件的代码如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<title>Document</title>
<link href=css/main.css rel=stylesheet> <!-- 注意这里的文件引入路径 -->
</head>
<body>
<img src=logo.png alt=""> <!-- 注意这里的文件引入路径 -->
<script type=text/javascript src=index.js></script> <!-- 注意这里的文件引入路径 -->
</body>
</html>
这个时候，如果是在本地开发服务器中查看项目，是没有问题的。因为在本地开发服务器下，有且只有我们当前开发的这一个项目，并且项目所需要的文件，也都可以通过开发服务器的根域名获取到。比如可以直接通过 localhost：8080/css/main.css 找到相关文件。
但是真实的服务器上可能有很多项目，想要访问项目文件，需要通过 域名+项目目录 来访问，比如 www.fengzhen8023.com/myProject/css/main/css 来访问。
但是如上面 .html 文件所示，文件的引入路径中，没有项目目录名。所以会直接到根域名下找所需要的资源，那么最终肯定是获取不到，报出一些404的错误。
所以根据服务器部署的实际情况，我们在打包编译项目的时候，需要做一些额外配置，使得在引入文件资源的时候，在前面加一些路径，比如域名或者项目文件名等，使得文件可以被正常引入。
这也是本篇博客的主要内容，包括两个方面：
- 在所有的文件引用路径中，添加前缀域名
- 单独给图片文件引用路径中，添加前缀域名
2. 在所有的文件引用路径中，添加前缀域名
为了达到这个目的，我们需要在 webpack.config.js 文件中进行配置，配置的方法非常简单，这里直接给出代码：
module.exports = {
/* 节省篇幅，其他配置已省略 */
output: {
filename: "index.js", // 出口文件的文件名
path: path.resolve(__dirname, "build"), //出口文件的路径，注意一定要是绝对路径
publicPath: 'http://www.fengzhen8023.com/myProject/' // 给所有的文件引用路径中，添加前缀域名
}
}
这里将其他的配置规则省略了，如果你想看其他的配置规则，可以查看我的 GitHub仓库 - webpack-learning ,或者通过本文末尾的链接，跳转到我之前的博客中进行查看。
配置完成之后，再次进行打包编译项目，得到的 .html 文件如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<title>Document</title>
<link href=http://www.fengzhen8023.com/myProject/css/main.css rel=stylesheet> <!-- 注意这里的文件引入路径 -->
</head>
<body>
<img src=http://www.fengzhen8023.com/myProject/logo.png alt=""> <!-- 注意这里的文件引入路径 -->
<script type=text/javascript src=http://www.fengzhen8023.com/myProject/index.js></script> <!-- 注意这里的文件引入路径 -->
</body>
</html>
如此，部署到服务器上的项目，就可以正常访问所需要的文件了。
3. 单独给图片文件引用路径中，添加前缀域名
在上一节中，我们知道如何给项目中所需要引入的文件添加前缀，这里在介绍，如何单独给图片资源引用路径添加前缀域名，使得项目更具灵活性。
这个时候需要使用到一个laoder—— url-loader，使用之前首先要进行安装，命令如下：
yarn add url-loader -D
安装完成之后，在 webpack.config.js 中进行如下配置：
module.exports = {
/* 节省篇幅，其他配置已省略 */
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 2 * 1024, // 小于2k的图片，直接使用Base64编码进行处理
outputPath: '/image/'
}
}
}
]
}
}
关于url-loader和Base64的相关介绍，大家可以查看我的上一篇博客: 在项目中对打包编译的文件进行分类，里面有较为详细的介绍。
配置完成，再次编译项目的时候，得到的 .html 文件中的代码如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<title>Document</title>
<link href=css/main.css rel=stylesheet> <!-- css文件引用路径没有做处理 -->
</head>
<body>
<img src=/image/logo.png alt=""> <!-- 注意这的图片的引用路径 -->
<script type=text/javascript src=index.js></script> <!-- js文件引用路径没有做处理 -->
</body>
</html>
4. 写在最后
以上便是这篇博客的全部内容，如果你想对其他的文件单独进行引用路径的修改，可以查阅相关的文档，不过大致思路是：
给处理这些文件的loader配置相关的属性，来指定打包编译后，文件的引用路径。
网友评论