Webpack Encore 删除我的图片

Question

我遇到了 Webpack Encore 和 SCSS 的问题。

我的项目中有一个 SCSS 文件、一个图像和 Webpack Encore。但是当我用Webpack编译时，它会生成我原始文件logo.png的副本到logo.<hash>.png，正常，但是图像不显示，我什至无法打开它，图像被删除了。

另一方面，我使用 CopyWebpackPlugin 生成的所有图像都是可读的，但我无法从我的 SCSS 访问它...

结构

/assets
    /images
        logo.png
    /scss
        app.scss
/public
    /build
        /css
            app.<hash>.css
        /images
            logo.<hash>.png

app.scss

div {
    background-image: url('../images/logo.png');
}

webpack.config.js

var Encore = require('@symfony/webpack-encore');
var webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    .cleanupOutputBeforeBuild()

    .enableSourceMaps(!Encore.isProduction())

    // uncomment to create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()

    // IMAGES
    .addPlugin(new CopyWebpackPlugin([
        {
            from: './assets/images',
            to: 'images',
            force: true
        }
    ]))

    // CSS
    .addStyleEntry('css/app', [
        './assets/scss/app.scss',
    ])

    // uncomment if you use Sass/SCSS files
    .enableSassLoader(function(options) {
        // https://github.com/sass/node-sass#options
    })

    .addLoader({loader: 'shebang-loader'})

    // uncomment for legacy applications that require $/jQuery as a global variable
    .autoProvidejQuery()

    .enableBuildNotifications()
;

module.exports = Encore.getWebpackConfig();

谁能告诉我我做错了什么

Answer 1

你可以删除

.cleanupOutputBeforeBuild()

或 添加类似的内容：

.cleanupOutputBeforeBuild(['static'], (options) => {
        options.verbose = true;
        options.root = __dirname;
        options.exclude = ['img'];
    })