项目如何导入css文件路径问题,【React】webpack打包如何统一js和css中图片资源路径...

在webpack打包项目时经常要处理资源的路径问题，而通常处理方案有以下几种

不设置publicPath，生成基于页面的相对路径

设置publicPath，可设置相对路径和绝对路径

设置__webpack_public_path__，js中资源路径使用该变量， css中资源未使用

项目路径：

开发环境因为都是基于/根目录所以怎么设置都OK，到了测试环境和生产环境路径就无法做到适配了。

开发环境页面地址：http://localhost:8080/index.html

开发环境资源路径：http://localhost:8080/[js|css|img]

测试环境页面地址：http://www.test.com/webapp/aaa/index.html

测试环境资源路径：http://cdn.test.com/static/aaa/[js|css|img]

生产环境页面地址：http://www.prod.com/webapp/aaa/index.html

生产环境资源路径：http://cdn.prod.com/static/aaa/[js|css|img]

问题: 对于测试环境和生产环境只会打包一次，如何做到js和css里面的img路径能适配不同的环境呢？

解决该问题首先有几个要点

1、页面和资源的域名和路径都不同，不能简单的使用相对路径

2、js中的相对路径是针对当前页面，css中的相对路径是针对当前css文件

3、js可以定义资源路径前缀变量，css无法使用

4、可以针对资源类型可以单独设置publicPath

问题解决思路

1、js中的资源路径用引入外部变量，

比如： var imgPath = window.staticPath; //window.staticPath由后台向index.html注入

由

改为

改成动态的src缺点就是webpack不能识别这个动态拼接的地址就无法把assets下的图片打包的dist/img路径下，当然有个小技巧是两个src都设置。

2、js中设置__webpack_public_path__变量

比如：__webpack_public_path__ = window.resourcePath; //window.resourcePath由后台向index.html注入

js中img写法不变

该方式的缺点css中的img url不能使用

3、webpack中配置images rule的publicpath，

{

name: 'img/[name].[ext]',

publicPath:'../',

limit: 1024

}

因为publicPath优先级会大与__webpack_public_path__

所以缺点是js中的img src同样会用此publicpath，而js中的相对路径是基于当前页面

4、后面翻file-loader源码发现publicpath，其实可以定义为一个function，

所以有了一个很傻的办法，动态设置publicpath

{

name: 'img/[name].[ext]',

publicPath: function(url){

if(assetsUtil.useWebpackPath(url)){

return `__webpack_public_path__ + ${JSON.stringify(url)}`

}

return '../'

},

limit: 1024

}

缺点就是需要维护哪些资源使用绝对路径，哪些使用相对路径

综上，目前还没有一个很有效便捷的方法解决该问题。希望有遇到该问题的朋友提点方案和建议。

回答

目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深。

先说下修改了哪些配置

1-build/utils.js下的cssLoaders内的generateLoaders方法内部的

// Extract CSS when that option is specified

// (which is the case during production build)

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

publicPath: '../../' //此处修改是矫正iview的font等文件夹打包路径错误

})

} else {

return ['vue-style-loader'].concat(loaders)

}

2-webpack.base.conf.js下的module对象内的rules针对图片类型的配置

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 1024,

name: utils.assetsPath('img/[folder]/[name].[ext]')

// [folder]/ 是为了保留项目组件文件夹内部资源文件夹

// 在打包后在img文件夹里面对应生成相同的文件夹,方便维护

// 另外取消了图片的hash

}

},

3-config/index.js

dev的配置就不说了,改了端口,偶尔会修改下默认启动的lolocalhost用于移动调试

主要是build下的

assetsPublicPath: './',//改为./

目前这套配置运行良好.图片那里的修改你可以照样引用原本的cli配置.我这是根据项目需求变动的.

assetsPath如下

exports.assetsPath = function (_path) {

const assetsSubDirectory = process.env.NODE_ENV === 'production'

? config.build.assetsSubDirectory

: config.dev.assetsSubDirectory

return path.posix.join(assetsSubDirectory, _path)

}