极致处理webpack装包css情㊑况照片相对路径难题

2021-03-23 16:44 jianzhan

在vue部件的style标识內部有以下一段应用情况照片的css编码

background-image: url("../assets/img/icon_add.png");

在webpack中css-loader的分析配备以下

{
        test: /\.(css|less)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: ['style-loader', 'css-loader', 'less-loader']
    }

装包后在dist文件目录的发觉沒有css文档。它是由于css文档被转换变成js文档。

 

这时起动新项目，情况照片引进恰当，可以一切正常显示信息。

2 将css文档获取到独立的文档文件目录

应用 mini-css-extract-plugin 将css文档独立获取到dist文件目录下的css文件目录下。

2.1 loader配备

{
        test: /\.(css|less)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }

2.2 plugin配备

new MiniCssExtractPlugin({
            filename: 'css/[name][contenthash].css',
        })

装包后，dist文件目录构造以下

能看到这时照片在网站根目录(dist)文件目录下，可是css文档处于dist/css/文件目录下。如今看来一下装包后的css文档是怎样引入照片的相对路径。

2.3 装包結果

background-image: url(bb65a86a2fe7669e483a56b970bea421.png);

能看到在dist/css文件目录下沒有bb65a86a2fe7669e483a56b970bea421.png照片。因而照片没法一切正常显示信息。理想化的状况是

background-image: url(../bb65a86a2fe7669e483a56b970bea421.png);

3 处理计划方案

变更loader的配备以下

{
        loader: MiniCssExtractPlugin.loader,
        options: {
            // 当今的css所属的文档相对性于装包后的根相对路径dist的相对性相对路径
            publicPath: '../'
        }
    }, 'css-loader', 'less-loader'

小结

分离出来css文档造成css情况照片相对路径不正确，处理计划方案的关键是配备publicPath的值，publicPath的值是css文档所属的文档文件目录相对性于网站根目录的相对性相对路径值。 例如，根相对路径是/,css文档所属的文件目录是/css/，因而相对性相对路径是..

出现意外难题

为何webpack装包后，css文档被混入到bundle.js文档中，可是照片沒有被混入到bundle.js中？？？

到此这篇有关极致处理webpack装包css情况照片相对路径难题的文章内容就详细介绍到这了,大量有关webpack装包css情况照片相对路径內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

为您推荐