webpack入门学习笔记12 —— 打包编译后文件的引入路径问题

最新推荐文章于 2024-05-13 09:30:57 发布

fengzhen8023

最新推荐文章于 2024-05-13 09:30:57 发布

阅读量1.5k

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/fengzhen8023/article/details/98470938

版权

webpack 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

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>