Question

当我运行npm run build "build": "webpack"时，webpack用main.css，index.html和index.js为我生成dist文件夹，但是CSS或HTML中的图像不起作用他们不在那里。

在dist文件夹的CSS中，它们的引用方式如下

background-image: url("../../../assets/img/works/works-3.jpg");

以HTML

<img src="./assets/img/logo.png">

我不确定要解决什么，以便我的图像正常工作。

我有这个webpack配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
var path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    module: {
        rules: [
            {
                test: /\.css$|\.sass$|\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader?url=false'
                    },
                    { loader: 'sass-loader' }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {test: /\.png$|jpg|jpeg/, use: [
                'file-loader?name=i/[hash].[ext]'
            ]}
        ]
    },
    resolve: {
        extensions: ['.js', '.es6'],
        modules: ['node_modules', 'spritesmith-generated']
    },
    output: {
        path: __dirname + '/dist',
        filename: 'index.js'
    },
    devServer: {
        port: 8080,
        contentBase: './src',
        watchContentBase: true
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'src/assets/img/icons'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
                css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.scss')
            },
            apiOptions: {
                cssImageRef: '../spritesmith-generated/sprite.png'
            }
        })
    ]
};

UPD 已安装Copy Webpack Plugin，并将资产文件夹复制到dist文件夹。 HTML中的图像可以正常工作，而CSS中的图像则不能。

Answer 1

使用CopyWebpackPlugin之后，您需要将background-url更改为/dist/images/imageName。但这取决于构建文件夹的方式。此插件会将所有资产复制到您的构建文件夹中，因此您需要从dist文件夹中导入它们。

Webpack在构建后不会从CSS加载图像

1 个答案: