bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 71 forks source link

Why resolve with file-loader not work ? #235

Open pejman-hkh opened 9 months ago

pejman-hkh commented 9 months ago

My config file :

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";

const path = require('path');

module.exports = {
    mode : 'development',
    entry: [
        __dirname + '/src/app.js',
        __dirname + '/src/app.scss'
    ],
    output: {
        path: path.resolve(__dirname, 'dist'), 
        filename: 'app.min.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [],
            }, {
                test: /\.min\.js$/,
                use: [ 'script-loader' ]            
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [

                    devMode ? "style-loader" : MiniCssExtractPlugin.loader,

                    {
                        loader: 'file-loader',
                        options: { outputPath: './', name: '[name].min.css'}
                    },
                    {
                        loader: 'resolve-url-loader',
                        options: {

                        }
                    },                                      
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        }
                    },
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg|otf|jpeg|jpg|png)$/,
                loader: 'file-loader',
                exclude: /node_modules/,
                options: {
                    name: '[path][name].[ext]?[hash]',
                    outputPath: './'
                }
            },                       
        ]
    },
    plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
    devServer: {
    static: {
        directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
    },

};

When I add css-loader to this file-loader not work. Is there any option for save file with same name and directory ? Or just change urls and create files with file-loader and use it ?