js修改地址栏url_在gulp、create-react-app中css，js中的文件路径

我们的项目HTML文件单独放在一个服务器上，静态资源js、css、images放在我们的静态资源服务器上，这样部署后会出现一个问题，css文件中的图片相对路径，在html的服务器上就会变成

//html文件的地址
http://nb.weiboyi.com

html入口文件在php的服务器中；

js，css，image在单独的cdn上，存在一个问题，就是css文件中引用图片的路径是相对路径，但是服务器发起请求时相对路径是根据浏览器地址栏的location路径；这就存在一个问题，location的路径下没有对应的image资源：

解决方案：

类似webpack的解决方案，将小图片通过base64打包到css文件中；将大文件的路径替换成全路径。

这里又出现一个问题，我们的静态资源路径是动态的，每次发布会生成一个版本号；

cdn.xxx.com/static/xxx_version/css/main.css;

解决办法，就是将cdn的路径，设置成环境变量，通过环境变量替换css文件中的路径。

下面是gulp的配置方式。

function 

这样做是因为我们的项目是老项目了，没有使用模块化开发的方式写代码；所以只能使用gulp这样的构建工具；

create-react-app解决这个问题：

// 在命令行使用 linux，macos；命令行写的好处是可以通过jenkins注入
PUBLIC_URL=http://cdn.weiboyi.com npm build

//在.env.development文件中写也可
background:url(process.env.PUBLIC_URL)

在webpack中的配置，

module.exports = {
    ...
    output: {
        ...
	publicPath: publicPath,	
    }
    ...
}