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)
}

的index.htm

<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
        })
    ]
};

Answer 2

老兄，你救了我的一天 useRelativePaths 甚至没有在 webpack 文档中提到过......而且，即使知道它，它仍然太混乱，我也不得不返回一个文件夹然后手动指向再次到输出路径：

"options": {
    outputPath: (url, resourcePath, context) => {
        return `fonts/${url}`;
    },
    publicPath: '../fonts',
    useRelativePaths: true,
    name(resourcePath, resourceQuery) {
        return isDevelopment ? '[path][name].[ext]' : '[contenthash].[ext]'
    },
}

非常感谢您抽出时间回来回答您自己的问题。

Webpack＆amp; SCSS：如何使用图像路径？

2 个答案: