webpack中publicPath的深入解析

最近在学习webpack打包原理及过程，在配置出口output时遇到了个难题，就是publicPath配置项，一直没搞明白他有什么作用，官网上就解释它是用来按需加载或者加载外部资源时要用到，当我们打包的时候webpack会在静态文件路径前面添加publicPath的值，当我们把资源放到CDN上的时候，把publicPath的值设为CDN的值就可以了，对于我这种小白来说肯迪是一脸懵逼，所以还是决定自己去一探究竟。
首先我想要说一下publicPath的作用是分环境的，在开发环境中，也就是启动webpack-dev-server时，webpack会将打包好的静态文件放在publicPath中，如果需要访问其中的资源直接加上pubilcPath路径就行，而在生产环境中，当时用webpack进行打包时，webpack会在静态文件前面加上publicPath的值，在这里你可能有个疑问，webpack-dev-server不是启动服务器吗，怎么会进行打包呢？？？？？，实际上是会的，只是我们看不到，他会实时监听你的代码，只要你的代码一变动，他就会打包，同时在默认情况下会将打包后的文件放入更目录下，如果你加上publicPath他就会帮你打包到指定的路径下。下面我们分两种情况来验证一下一个是手动创建的index.html,一个是webpack打包生成的index.html，通过这两种情况我们来分析下publicPath的作用。
首先我们自己搭建一个项目。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200722151955379.png)

这是我的目录结构，首先通过npm init初始化项目，通过npm install webpack webpack-dev-server css-loader style-loader url-loader file-loader -D来安装依赖，
在package.json中加入如下代码

 "scripts": {"build": "webpack","dev": "webpack-dev-server"},

我的webpack.config.js文件

const path = require('path');
// const webpack = require('webpack');
// const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: path.join(__dirname, 'src/index.js'),output: {path: path.join(__dirname, 'dist'),filename:'bundle.js'// publicPath:'/dist/images/'},mode:'development',devtool:'cheap-module-eval-source-map',module: {rules:[{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.(png|jpg)$/,loader: 'url-loader',options: {limit: 5000,name: '[name].[hash:8].[ext]',outputPath:'images/'}}]},plugins: [// new htmlWebpackPlugin() ]
}

style.css如下

.small {width: 200px;height: 200px;background: url(../img/small.jpg) no-repeat;
}
.big {width: 500px;height: 350px;background: url(../img/big.jpg) no-repeat;
}

index.js 如下

import './css/style.css';
import img from './img/big.jpg';var img1 = document.createElement('img');
img1.src = img;
document.body.appendChild(img1);

自己创建的index.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><div class="small"></div><div class="big"></div><script src="./bundle.js"></script>
</body>
</html>

因为上面我们讲了，webpack-dev-server将打包好的文件放入根目录下，里面包含bundle.js，所以我们这里才能引用，然后我们通过npm run dev启动我们的项目，我们看看结果

我们看到可以正确显示，现在我们执行npm run build进行打包，打包完成之后我们直接用浏览器打开我们手动创建的index.html文件，同时我们将index.html中img的src改成./dist/bundle.js因为我们打包后的文件会在根目录下的dist目录中，浏览器打开我们的indedx.html后我们发现没有图片显示，我们来看下控制台
我们可以看到图片的地址是images/…可是我们更目录下更本没有images文件夹，所以我们当然找不到，这时我们的publicPath登场了，我们在webpack.config.js中将output改为

 output: {path: path.join(__dirname, 'dist'),filename:'bundle.js',publicPath:'./dist/'},

这是什么意思呢，在生产环境我们打包的时候会在静态资源地址前面加上我们publicPath的值现在图片的地址就会变为./dist/images/…，我们上删掉ist目录重新打包一下，图片就会显示出来，结果就不看了，我们看下控制台

这就和我哦们所说的一样了，这时浏览器就会去寻找当前目录也就是根目录下的dist目录中的images这就找到了我们的照片。
然后我们再试试通过localhost:8080打开试试，我们先将dist目录删掉，方便我们进行试验，这时我们的publicPath就要改一下，不能继续写成./dist/了，为什么呢？？，因为生产环境中打包出来的静态资源地址是根目录下images/…，所以我们要加上./dist,而我们这是开发环境，我们加上我们的publicPath的话会将我们的资源打包放入该位置，同时也会在静态资源地址前面加上我们的值，这时我们的地址就会变成/dist/images/…，我们启动项目时会将我们打包好的文件放入根目录下的dist文件夹中，这时我们就能找到我们的图片，所以我们改成/dist/，我们通过npm run dev启动我们的项目

从这里我们可看到，却是生成了dist目录

我们的项目正常运行，我们来分析下怎么运行的，整个项目运行在localhost:8080下面，也就是服务器地址是localhost:8080 , 当我们在浏览器中输入服务器地址，服务器会寻找它下面的index.html文件，并返回给浏览器，因为我们的项目在自己创建的目录下启动的，它下面有index.html，这没有问题，浏览器在接受到index.html 就开始解析，它碰到script标签就会向服务器请求js 文件，js的地址是./dist/bundle.js，服务器就会在dist目录下找bundle.js. 根据我们所知道的，当有publicPath 配置时，webpack-dev-server 会把打包后的资源放到publicPath 指定的目录，也就是dist 目录下，所以服务器是在dist 目录下可以找到。

下面我们看看自动生成的index.html有什么区别，删掉index.html,通过npm安装html-webpack-plugin,webpack.config.js 修改如下

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: path.join(__dirname, 'src/index.js'),output: {path: path.join(__dirname, 'dist'),filename:'bundle.js',publicPath:'/dist/'},mode:'development',devtool:'cheap-module-eval-source-map',module: {rules:[{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.(png|jpg)$/,loader: 'url-loader',options: {limit: 5000,name: '[name].[hash:8].[ext]',outputPath:'images/'}}]},plugins: [new htmlWebpackPlugin() ]
}

npm run dev 启动服务器，浏览器，输入localhost:8080，可以看到服务器下面，都没有index.html 这个文件

这和上面我讲的是一样的，配置文件被打包到了dist目录下面，但是我们看不见，我们在8080后面加上我们的dist,我们会发现页面上会出现一张图片，这是通过我们js加载出来的图片，这也充分证明了，webpack-dev-server 会把所有的文件打包到publicPath指定的目录。这样访问有点不太方便了，最简单的办法，就是把publicPath配置去掉，这样webpack-dev-server就会把文件打包到根目录下，localhost:8080就会访问。

webpack中publicPath的深入解析相关推荐

Webpack 中 resolve 路径解析
我们先要从 Webpack 中 resolver 这个概念说起.Webpack 带来的一大理念是:一切皆模块.在项目中我们可以使用 ESM 的方式 import './xxx/xxx' 或者 impo ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
webpack把源代码里面的console和debugger全部去掉_在webpack中，module、chunk和bundle到底是什么样的存在？...
What are module, chunk and bundle in webpack?(在webpack中,module.chunk和bundle到底是什么样的存在呢?)相信很多人在使用webpa ...
vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项
在web开发中,我们得使用到js(es6).css.html等技术,需要对资源文件管理,例如图片,同时还需要对性能.热加载等进行处理:这些功能都是可以在webpack中进行配置管理的,下面具体介绍说明 ...
在webpack中使用eslint配置（详细教程）-js教程-PHP中文网
本篇文章主要介绍了webpack引入eslint配置详解,现在分享给大家,也给大家做个参考. webpack中eslint使用首先,要使webpack支持eslint,就要要安装 eslint-lo ...
vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置安装 axios ...
webpack中如何使用vue
1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...
html字体库otf文件使用,在webpack中加载.otf字体文件的正确方法是什么？
使用webpack时加载.otf字体文件的适当方式是什么?我曾多次尝试包括在我的webpack.config.js的规则,没有任何成功的基础上,很多例子我大致如下的线路看出:对于在webpack中加载 ...

webpack中publicPath的深入解析

webpack中publicPath的深入解析相关推荐

最新文章

热门文章