webpack打包php资源,webpack打包后的静态资源问题

情景&＃xff1a;

使用webpack 打包前端应用后&＃xff0c;图片和css、js 资源引用会出问题&＃xff0c;

这源于开发环境的目录和生产环境的路径【url】不同

比如&＃xff0c;开发环境的url是&＃xff1a;

http://localhost:8088/static/...

其中【http://www.xxx.com/aaa/bbb/】是配置的生产环境路由。

指向express服务器。

二者区别&＃xff0c;开发环境是放在域名的根目录&＃xff0c;所以不存在引用路径变化的问题。

如果生产环境不做处理的话&＃xff0c;图片等静态文件会自动在相对路径前添加域名。

比如&＃xff1a;

在样式中写到&＃xff1a;

background:url(abc.png)

这里会自动被转化为&＃xff1a;

http://www.xxx.com/abc.png

然而&＃xff0c;除非项目放在了域名根目录下&＃xff0c;一般情况这是路径是不对的。

解决方案&＃xff1a;

webpack 是个优秀的打包工具&＃xff0c;肯定有相关的配置的。

在build配置脚本中&＃xff0c;就有相关配置项&＃xff1a;

其中&＃xff1a; index: path.resolve(__dirname, &＃39;../dist/index.html&＃39;),

表示&＃xff0c;打包后的入口index.html文件存放的位置&＃xff0c;这里表示&＃xff0c;在dist目录下。

assetsRoot: path.resolve(__dirname, &＃39;../dist&＃39;)

表示&＃xff0c;打包后埔静态资源文件存放的根目录&＃xff0c;表示同样是dist目录。

assetsSubDirectory: &＃39;static&＃39;,

表示静态文件打包后存放的子目录&＃xff0c;&＃39;/static&＃39;

assetsPublicPath: &＃39;/&＃39;,

这个表示静态资源部署后的公共路径。

假如应用路径是【http://www.xxx.com/aaa/bbb/】

那么这里就应该配置为&＃39;/aaa/bbb/&＃39;

如果需要传到cdn,则可以改成http://stacic.xxx.com/aaa/bbb/