webpack打包中css静态资源设置为相对路径

2021年03月02日作者:井井客来源:井井客整理

webpack打包配置静态资源为相对路径的方法

webpack打包中css静态资源设置为相对路径

有时候在使用webpack打包时,会遇到css文件中包含字体文件或者图片路径时,打包出来结果中静态资源指向不是相对于css的相对位置,而绝对地址。但在用绝对地址访问文件时,又找不到文件,这时就需要修改webpack配置文件。

修改 output 中的 publicPath

网上有方案是修改 webpack.pro.config.js 文件中,output 导出的 publicPath 路径,由" / "修改为" ./"。

我尝试用这种方法,打包后的CSS文件中的静态资源路径是变成了相对路径,但是路径依然存在问题,并不适用在我的项目中。因为其它都是正常的,只有CSS中引用的字体和图片路径异常,所以我开始朝 loader 方向找解决方法。

方法1:extract-text-webpack-plugin

使用 extract-text-webpack-plugin 插件,在 webpack.base.config.js 文件中,找到 module 下的 rules 时,针对 css/less/sass 的loader 进行使用,例如:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
......
{
    test: /.css$/,
    use: ExtractTextPlugin.extract({
        use: ['css-loader', 'autoprefixer-loader'],
        publicPath: '../../'
    })
}
......

方法2:mini-css-extract-plugin

使用 extract-text-webpack-plugin 插件,我使用的是1.3.9,该版本已经支持 publicPath 配置,同样在 webpack.base.config.js 文件中,可以如下使用:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
......
{
    test: /.css$/,
    use: [
        isProduction
            ? {
                  loader: MiniCssExtractPlugin.loader,
                  options: {
                      esModule: false,
                      publicPath: '../../'
                  }
              }
            : 'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'postcss-loader'
    ]
}
......

注意 publicPath 具体值是根据静态资源打包位置相对于CSS文件路径来设置。

啦啦啦~开始打包~完美~

文章TAG:webpack

本文标题:webpack打包中css静态资源设置为相对路径
本文链接:http://www.jingjingke.com/c/02372.html

上一篇:原生JS模拟jQuery中serializeArray获取表单数据
下一篇:如何在webpack项目中使用mock服务