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。您至少有 2 个选择：

使用CopyWebpackPlugin将文件复制到任何你想要的地方，这至少删除了你提到的"manual"部分
将您的图像引用移动到样式，webpack 可以通过您正在使用的 scss 加载器获取它们。例如
```
background-image: url("img/foo.png");
```

Answer 2

还有通过 JavaScript.

导入图像的选项

import '../img/image.png';

Answer 3

我遇到了这个问题。我不知道文件加载器只在你运行构建时复制图像，并且在使用 webpack-dev-server 时不做任何事情。我的解决方案是：

$ npx webpack

Webpack 没有将图像复制到 dist 文件夹

Webpack is not copying images to dist folder

html

webpack

webpack-file-loader