webpack中的publicPath理解

记录一下自己用webpack打包过程中遇到的三个路径问题：分别是 output.path、 output.publicPath、webpack-dev-server配置项中的 publicPath

output.path

output.path指定了webpack打包的总出口，是打包出来的所有文件在硬盘中的存储位置，是一个绝对路径。通常配置如下，即 打包出来的所有文件都会放在项目根目录的dist文件夹下

output: {
    path: path.join(__dirname, './dist'),
},

output.publicPath

静态资源的概念：可以理解为前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。

output.publicPath指定了打包之后这些静态资源的根目录。比如如下配置，这时静态资源打包后在硬盘中的位置就是 dist 文件夹下。

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

如果设置为 publicPath:'/dist/static/，那么静态资源就会放在 dist文件夹下的 static 文件夹中。

在用loader对静态资源进行处理的时候，可能还会配置路径，如下：

output: {
    path: path.join(__dirname, './dist'),
    publicPath:'/dist/'
    // 把js放到js文件夹下
    filename: 'js/[name].js',
},
...
// 把img放到images文件夹下
{test: /\.jpg$/,loader: 'url-loader?name=images/[name].[ext]'}

这样配置打包之后输出的
js文件的路径为：项目根目录 / dist / js / js文件；
图片路径为：项目根目录 / dist / images / img文件

一般情况下 publicPath 应该以 ‘/’ 结尾，而 其他 loader或插件的配置 不要以’/'开头

webpack-dev-server配置项中的publicPath

在本地开发阶段，会使用devServer启动一个本地服务器并自动打包，我们就可以用 host name 在浏览器访问页面。

webpack-dev-server 打包的内容是放在虚拟内存中的，这里也可以配置 publicPath 属性，指定 打包后的资源在内存中存放的位置。

假设host name：localhost:8888，打包输出 bundle.js 到内存中

publicPath：’/’ ，访问虚拟资源： localhost:8888/bundle.js
publicPath：’/dist/’ ，访问虚拟资源： localhost:8888/dist/bundle.js

静态资源打包之后依旧会放到 output.publicPath

路径问题衍生出的引用问题

（早期碰到过的问题）

• 前提1：使用 html-webpack-plugin 插件会把html页面也拷贝一份放到内存中，自动插入bundle.js。
• 前提2：devServer配置的时候使用 –content-base：src 把 src 挂载到了服务器根路径。
• 在本地用devServer测试的时候，引入静态资源的路径应该是是相对于服务器的路径。
  举例：webpack-dev-server的 publicPath 默认为 “/” ，即虚拟资源默认生成在 localhost:8888/，虚拟 html页面 也在这一路径下（真实路径是src/index.html）。静态资源图片 1.jpg 放在 src/images/1.jpg。那我如果要在（虚拟） html 中引入图片，标签中路径应该是：src="/images/1.jpg"
• 但是打包发布时，需要生成一个完整的项目文件夹，这时在 真实 html页面 中不能用上述的服务器相对路径，而要用相对于本地的路径，即 html 中引入的图片路径改为：src="./images/1.jpg"