Webpack不会将图像复制到dist文件夹

Question

我是从webpack开始的,但我现在真的很新,而且我现在卡住了.我的项目正确复制了我的字体而不是图像.现在,我能够使其工作的唯一方法是手动将图像复制到dist/img文件夹.

这是我的配置:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('webpack');
var path = require("path");



module.exports = {
entry: './src/app.js',
output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'app.bundle.js'
    // publicPath:  '/dist',
},
module: {
    rules:[
        {
        test:/\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader?sourceMap","resolve-url-loader","sass-loader?sourceMap"],
            // publicPath: '/dist'
            })
        },
        {
            test: /\.(woff2?|ttf|otf|eot|svg)$/,
            use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }  
                  }]
            // loader: 'file-loader?name=/fonts/[name].[ext]'
        },
        {
            test: /\.(jpg|png|gif)$/,
            use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        publicPath:'img/'
                    }  
                  }]
        }
    ]
},
devServer: {
    contentBase: path.join(__dirname, "/dist"),
    compress: true,
    port: 8000,
    stats: "errors-only",
    open: true
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    }),
    new ExtractTextPlugin("styles.css"),
    new HtmlWebpackPlugin({
        title: 'Project',
        hash:true,
        template: './src/index.html'
    })
]
}

我尝试了几种配置,但没有解决方案.我也在这里寻找任何解决方案但没有成功.

对不起我的英语不好.

这是我的结构: 来自我的崇高文本的结构

谢谢大家!!

Answer 1

如果您的图像仅在HTML文件中作为<img>标记引用,则默认情况下webpack不会选择它们,因为它不解析HTML.您至少有两个选择:

1. 使用CopyWebpackPlugin将文件复制到任何您想要的位置,这至少会删除您提到的"手动"部分

2. 将图像引用移动到样式,webpack可以通过您正在使用的scss加载程序将它们拾取.例如

   background-image: url("img/foo.png");