Webpack和SCSS：如何使用图像路径？

Question

我正在尝试建立一个基本的webpack项目。除了生成的CSS中生成的图像路径外，其他所有内容都很平滑。

资料夹结构：

src/
    assets/
        images/
    js/
    scss/
dist/              
    assets/           <--- generated correctly, incl. images
        images/
    bundle.js
    main.bundle.css   <--- includes "wrong" paths, starting with dist/
index.htm
webpack.config.js

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    watch: true,
    entry: ['./src/js/main.js', './src/scss/main.scss'],
    output: {
        filename: 'dist/bundle.js'
    },
    module: {
        rules: [
            { // regular css files
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader?importLoaders=1',
                }),
            },
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
            },
            { // images
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        context: path.resolve(__dirname, "src/"),
                        outputPath: 'dist/'
                    }
                }
            ] 
        },
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/[name].bundle.css',
            allChunks: true
        })
    ]
};

src / scss / main.scss

@import "./../../node_modules/bootstrap/scss/bootstrap";

body {
    background-image: url('../assets/images/bg.jpg');
}

dist / main.bundle.css

body {
    background-image:url(dist/assets/images/bg.jpg)
}

索引

<link rel="stylesheet" href="dist/main.bundle.css">

问题：

dist/main.bundles.css已位于中dist/，但在图像路径前加上dist/。我这边肯定有配置问题。

任何的想法？提前致谢！

Answer 1

通过添加publicPath: '../'（docs）和useRelativePaths: true（docs）解决了问题：

module.exports = {
    // ...        
    module: {
        rules: [                 
            { 
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                            context: path.resolve(__dirname, "src/"),
                            outputPath: 'dist/',
                            publicPath: '../',
                            useRelativePaths: true
                        }
                    }
                ] 
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/[name].bundle.css',
            allChunks: true
        })
    ]
};