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

【问题标题】：Webpack is not copying images to dist folderWebpack 没有将图像复制到 dist 文件夹
【发布时间】：2018-07-20 03:52:15
【问题描述】：

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

我尝试了几种配置，但没有解决方案。我也在这里搜索了任何解决方案，但没有成功。

【问题讨论】：

标签： html webpack webpack-file-loader

【解决方案1】：

如果您的图像仅在 HTML 文件中作为 <img> 标签引用，webpack 默认不会提取它们，因为它不解析 HTML。您至少有 2 个选择：

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

【讨论】：

好的，谢谢！我现在正在尝试使用 CopyWebpackPlugin，效果很好！
太棒了！如果它对您有用，请接受此答案。
我正在尝试使用您的解决方案，但我有问题
new CopyPlugin([ { from: './img/*', to: 'img', force: true}, ])
它可以工作，但是在没有图像优化的情况下复制文件

【解决方案2】：

还有通过 JavaScript 导入图片的选项。

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

【讨论】：

【解决方案3】：

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

$ npx webpack

【讨论】：