webpack output.publicPath

lizuncong (lizuncong) · GitHubI am a strong believer in reverse engineering. lizuncong has 42 repositories available. Follow their code on GitHub.https://github.com/lizuncong

这篇文章用例子讲解我在webpack的学习过程中遇到的publicPath问题。

对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。创建项目目录如下：

index.js:

import './css/style.css'
import MyImage from './assets/bg.jpg'function component(){const element = document.createElement('div')element.innerHTML = 'hello webpack'element.classList.add('hello')const img = document.createElement('img')img.src = MyImagedocument.body.appendChild(img)return element
}document.body.appendChild(component())

webpack.config.js:

const path = require('path')module.exports = {mode: 'development',context: path.resolve(__dirname, '../src'),entry: {app: './index.js'},output: {filename: '[name].bundle.js',},module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']},{test: /\.(png|jpg|gif)$/,use: ['file-loader']}]}
}

style.css:

body{margin: 0;
}
.hello {color: red;height: 120px;background: url("../assets/bg.jpg") no-repeat;background-size: 100%;text-align: center;
}img {width: 40px;height: 40px;
}

可知在index.js中通过import MyImage from './assets/bg.jpg'，以及在style.css中通过background: url("../assets/bg.jpg") no-repeat;同时引用了图片bg.jpg。webpack.config.js中没有设置output.publicPath。运行webpack打包。打包后的目录如下：

查看浏览器运行结果：

结果发现图片并没有正常显示。检查network，可以看到图片的引用地址为file:///Users/lizuncong/Documents/webpack-demos/demo3-1/26f9c98952a19416da7a33221049f01c.jpg。明显不对的。查看app.bundle.js文件：

可以看到webpack运行函数中__webpack_require__.p = ""; 然后./assets/bg.jpg的导出路径为__webpack_require__.p + \"26f9c98952a19416da7a33221049f01c.jpg\"。

修改webpack.config.js，给output的设置publicPath: 'dist/'。并运行webpack。可以发现浏览器能正常显示图片了。

const path = require('path')module.exports = {mode: 'development',context: path.resolve(__dirname, '../src'),entry: {app: './index.js'},output: {filename: '[name].bundle.js',publicPath: 'dist/'},module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']},{test: /\.(png|jpg|gif)$/,use: ['file-loader']}]}
}

观察app.bundle.js，可知__webpack_require__.p = "dist/";正是我们在output.publicPath中设置的值。

webpack output.publicPath相关推荐

修改webpack的publicPath为动态设置以适配公司活动平台
背景: 我们需要将React开发的应用部署到一个活动搭建平台上,这意味我们只需要上传源码,没有搭建服务器的环节,没有配置Nginx的环节.具体步骤就是在该平台新建一个活动,然后将自己的源码传到这个活动 ...
webpack中publicPath的深入解析
最近在学习webpack打包原理及过程,在配置出口output时遇到了个难题,就是publicPath配置项,一直没搞明白他有什么作用,官网上就解释它是用来按需加载或者加载外部资源时要用到,当我们打包 ...
webpack+nginx开启gzip压缩部署项目
首先在服务器安装nginx sudo apt update sudo apt install nginx 安装完毕后将前端项目打包 webpack.output.publicPath里配置资源基础路径 ...
vue-cli2、vue-cli3脚手架详细讲解
转载自 vue-cli2.vue-cli3脚手架详细讲解前言: vue脚手架指的是vue-cli它是vue官方提供的一个快速构建单页面(SPA)环境配置的工具,cli 就是(command-line ...
vue中webpack默认配置_webpack中Entry与Output的基础配置
本文衔接上一篇文章: 不睡觉的怪叔叔:webpack的插件zhuanlan.zhihu.com 一.多入口打包的配置 webpack支持多入口的打包操作吗?答案是肯定的! 让我们修改webpack. ...
webpack/vue-cli 中的 publicPath / 和 ./ 的区别
webpack/vue-cli 中的 publicPath / 和 ./ 的区别在说这个问题之前,vue-cli 的配置文档已经说的非常清楚了 publicPath 而 webpack 对于 pub ...
浏览器缓存和webpack缓存配置
网络请求会耗费大量时间和请求,如果可以重用为改变的网络资源,对于用户来说可以更快更流畅的查看网页,对于服务器来说减少了很多负荷,所以浏览器缓存是前端优化的重要内容.本文介绍了浏览器缓存的机制和缓存在w ...
Express结合Webpack的全栈自动刷新
在以前的一篇文章BrowserSync,迅捷从免F5开始中,我介绍了BrowserSync这样一个出色的开发工具.通过BrowserSync我感受到了这样一个理念:如果在一次ctrl + s保存后可以 ...
轻松入门React和Webpack
2019独角兽企业重金招聘Python工程师标准>>> 最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织 ...
关于webpack的使用
关于webpack webpakc的是模块打包器.而不是任务执行器. 它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScri ...

webpack output.publicPath

webpack output.publicPath相关推荐

最新文章

热门文章