Webpack·恩科删除我的照片

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