Webpack 带有文件加载器/css加载器的网页包相对css url（）

我是webpack/npm的新手，我正在尝试了解如何在其他项目依赖中使用css URL

文件夹结构

src
  fonts/
  scss/
    app.scss
  js/
    app.js
  img/
  index.html

webpack.config.js

var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.js'
    },
    devServer: {
        stats: 'errors-only',
        compress: true,
        open: true,
        port: 9000
    },
    module: {

        rules: [

            // ES6 -> ES5 transpiler

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }, 

            // SCSS to CSS -> Autoprefix -> Load CSS

            {
                test: /\.(scss|css)$/,
                use: extractPlugin.extract({
                    use: [
                        'css-loader',
                        {
                            loader: 'postcss-loader', 
                            options: { 
                                plugins: (loader) => [require('autoprefixer')()]
                            }
                        },
                        'sass-loader'
                    ]
                })
            },

            // HTML Loader
            {
                test: /\.html$/,
                use: ['html-loader']
            },

            // Image Loader
            {
                test: /\.(jpg|png|svg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'img/',
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
            // Font Loader
            {
                test: /\.(eot|ttf|woff)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'fonts/',
                            name: '[name].[ext]'
                        }
                    }
                ]
            }


        ]

    }, 
    plugins: [
        new extractPlugin({filename: 'scss/app.css'}),
        new cleanWebpackPlugin(['dist']),
        new htmlWebpackPlugin({ template: 'src/index.html' }),
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
    ]
};

import 'lightgallery';

@import '~lightgallery/dist/css/lightgallery.css';

我已成功地将lightGallery包括在我的项目中，如下所示：

app.js

var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.js'
    },
    devServer: {
        stats: 'errors-only',
        compress: true,
        open: true,
        port: 9000
    },
    module: {

        rules: [

            // ES6 -> ES5 transpiler

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }, 

            // SCSS to CSS -> Autoprefix -> Load CSS

            {
                test: /\.(scss|css)$/,
                use: extractPlugin.extract({
                    use: [
                        'css-loader',
                        {
                            loader: 'postcss-loader', 
                            options: { 
                                plugins: (loader) => [require('autoprefixer')()]
                            }
                        },
                        'sass-loader'
                    ]
                })
            },

            // HTML Loader
            {
                test: /\.html$/,
                use: ['html-loader']
            },

            // Image Loader
            {
                test: /\.(jpg|png|svg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'img/',
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
            // Font Loader
            {
                test: /\.(eot|ttf|woff)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'fonts/',
                            name: '[name].[ext]'
                        }
                    }
                ]
            }


        ]

    }, 
    plugins: [
        new extractPlugin({filename: 'scss/app.css'}),
        new cleanWebpackPlugin(['dist']),
        new htmlWebpackPlugin({ template: 'src/index.html' }),
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
    ]
};

import 'lightgallery';

@import '~lightgallery/dist/css/lightgallery.css';

app.scss

var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.js'
    },
    devServer: {
        stats: 'errors-only',
        compress: true,
        open: true,
        port: 9000
    },
    module: {

        rules: [

            // ES6 -> ES5 transpiler

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }, 

            // SCSS to CSS -> Autoprefix -> Load CSS

            {
                test: /\.(scss|css)$/,
                use: extractPlugin.extract({
                    use: [
                        'css-loader',
                        {
                            loader: 'postcss-loader', 
                            options: { 
                                plugins: (loader) => [require('autoprefixer')()]
                            }
                        },
                        'sass-loader'
                    ]
                })
            },

            // HTML Loader
            {
                test: /\.html$/,
                use: ['html-loader']
            },

            // Image Loader
            {
                test: /\.(jpg|png|svg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'img/',
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
            // Font Loader
            {
                test: /\.(eot|ttf|woff)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'fonts/',
                            name: '[name].[ext]'
                        }
                    }
                ]
            }


        ]

    }, 
    plugins: [
        new extractPlugin({filename: 'scss/app.css'}),
        new cleanWebpackPlugin(['dist']),
        new htmlWebpackPlugin({ template: 'src/index.html' }),
        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
    ]
};

import 'lightgallery';

@import '~lightgallery/dist/css/lightgallery.css';

light gallery样式表引用了我正在使用网页

文件加载器成功加载到
font/
中的字体

我的问题是，构建的css文件试图引用scss文件夹中的字体，而不是我的根

ie:
http://localhost:9000/scss/img/loading.gif

我需要从css链接到的所有资产从我的根目录解析

ie
http://localhost:9000/img/loading.gif

我是否可以将css加载器配置为在所有url前面加上
/

救命啊
 文件加载器

尊重，但由于您尚未设置它，因此生成的路径将是相对路径。您可以将公共路径设置为

/

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/app.js',
    publicPath: '/'
},

这也将影响处理任何资产的其他加载程序和插件。这通常是您想要的，因此建议您这样做，但如果您只想为特定文件更改它，则可以使用

文件加载程序

上的

publicPath

选项

{
    loader: 'file-loader',
    options: {
        outputPath: 'img/',
        name: '[name].[ext]',
        publicPath: '/'
    }
}

---

嗨，你能看一下我在github上的帖子吗？我在最后的评论中添加了测试回购。