webpack file-loader 解析 css 文件中 background-image路径问题。

不念不忘少年蓝@ 2022-07-12 01:17 314阅读 0赞

# webpack file-loader 解析 css 文件中 background-image路径问题。 #

通过 webpack 的 file-loader 把 css 中的 background-image 图片提取出来构建到输出目录（例如dist或者build目录），发现图片被生成在了产出目录的根目录。

### webpack.config.js文件配置 ###

var webpack = require('webpack');
    var vue = require('vue-loader');
    var path = require('path');
    var HtmlWebpackPlugin = require('html-webpack-plugin'),
        ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
        //devtool: 'eval-source-map',
        entry: "./js/app.js",
        output: {
            path: './__build__',
            filename: 'js/shared.js',
        },
        resolve: {
            alias: {
                'src': path.resolve(__dirname, './resources'),
                'vue': 'vue/dist/vue.min'
            }
        },
        resolveLoader: {
            root: path.join(__dirname, 'node_modules'),
        },
        module: {
            loaders: [{
                test: /\.vue$/,
                loader: 'vue'
            }, {
                test: /\.js$/,
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                loader: ['babel-loader'],
                query: {
                    presets: ['es2015']
                }
            }, 
            {
       test: /\.json$/,loader: "json"},
            {
       test: /\.css$/, loader: "style!css" },
            {
       test: /\.less$/,loader: 'style!css!less'},
            {
       test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=4192&name=[path][name].[ext]' },//limit参数，代表如果小于大约4k则会自动帮你压缩base64编码的图片
            /*{
                test: /\.(png|jpe?g|gif|ico)(\?\S*)?$/,
                loader: 'file-loader',
                query: {
                    name: 'img/[name].[ext]'
                }
            },*/
            {
       test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
            {
       test: /\.svg$/, loader: "file" }]
        },
        vue: {
            loaders: {
                css: ExtractTextPlugin.extract('css-loader?sourceMap'),
                sass: ExtractTextPlugin.extract('css-loader?sourceMap!sass-loader?sourceMap')
            }
        },
        babel: {
            presets: ['es2015', 'stage-3'],
            plugins: ['transform-runtime']
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
            }),
            new ExtractTextPlugin('[name]-[hash:3].css')
        ]
    };

## 以下两种方法都可使用 ##

**==url-loader配置（1）==**

loaders: [
       {test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=4192&name=[path][name].[ext]' },
    ]

**limit参数，代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录**

**==url-loader配置（2）==**

test: /\.(png|jpe?g|gif|ico)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
            name: 'img/[name].[ext]'
    }

**直接将图片拷贝到生产目录**

接下来就可以正常使用了！

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

相关深入解析Java中文件路径处理问题

在Java中，文件路径的处理通常涉及到几个关键点： 1. **字符串构造**：Java中的File类或者Path接口用于操作文件和目录。你需要将操作系统特定的路径字符串转换为

骑猪看日落/ 2024年12月06日 01:36/ 0 赞/ 19 阅读

相关 Java多文件读写操作：文件路径解析问题

在Java中，多文件的读写操作通常涉及到File、Path和IO流等类。关于文件路径解析问题，主要可能出现在以下几个方面： 1. 文件不存在：如果直接使用文件名（不带路径）尝

桃扇骨/ 2024年11月26日 14:33/ 0 赞/ 85 阅读

相关解析：Java中关于文件路径操作的常见问题

在Java编程中，处理文件路径是一个常见的任务。以下是一些在Java中处理文件路径操作时可能遇到的问题： 1. **路径不存在**：如果试图访问的文件或目录不在指定路

客官°小女子只卖身不卖艺/ 2024年09月27日 08:30/ 0 赞/ 92 阅读

相关常见错误解析：Java中文件路径拼写问题

在Java编程中，文件路径的拼写错误可能导致各种问题，如： 1. **找不到文件**：如果你在代码中试图读取一个不存在的文件，那么程序会抛出`FileNotFoundExce

梦里梦外;/ 2024年09月21日 08:18/ 0 赞/ 93 阅读

相关 webpack file-loader 解析 css 文件中 background-image路径问题。

webpack file-loader 解析 css 文件中 background-image路径问题。通过 webpack 的 file-loader 把 css 中

不念不忘少年蓝@/ 2022年07月12日 01:17/ 0 赞/ 315 阅读

相关解析文件路径

有时候在编程时会碰到文件路径的解析,如提取一个文件路径中的文件名、文件所在目录，文件的后缀名等。下面写了一个小函数以实现这些功能。 include <stdio.h

Myth丶恋晨/ 2022年06月18日 04:44/ 0 赞/ 254 阅读

相关 webpack入门（六）：webpack 打包 css文件

上一篇，我们说了使用webpack.config.js 来设置webpack，而且之前我们也了解了如何打包 js 文件，现在我们看看如何打包 .css文件：老规矩，一步

朴灿烈づ我的快乐病毒、/ 2022年05月28日 00:39/ 0 赞/ 363 阅读

相关 vue→backgroundImage路径问题(vue里面放背景图片)

<template> <div class="role" :style="backgroundImg"> </div>

今天药忘吃喽~/ 2021年12月15日 00:49/ 0 赞/ 561 阅读

相关 webpack中css文件的代码分割

module.exports = { 　　output: { 　　　　filename: '[name].js', 　　　　chunkFilen

爱被打了一巴掌/ 2021年10月30日 06:00/ 0 赞/ 292 阅读

相关 SpringBoot中html引用JS/CSS文件路径问题

[SpringBoot中html引用JS/CSS文件路径问题][SpringBoot_html_JS_CSS] [SpringBoot_html_JS_CSS]: http

快来打我*/ 2021年09月18日 11:28/ 0 赞/ 649 阅读