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

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

- Alberto Molina

Answer 1

如果你的图片仅作为 <img> 标签在 HTML 文件中引用，webpack 默认不会将它们捆绑到模块中，因为它不解析 HTML。你至少有两个选择：

1. 使用 CopyWebpackPlugin 将文件复制到任何你想要的地方，这样至少可以消除你所提到的“手动”部分。

2. 将你的图片引用移动到样式文件中，在那里 webpack 可以通过你正在使用的 scss loader 找到它们。例如：

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

- olore

---

啊，好的，谢谢！我现在正在尝试使用CopyWebpackPlugin，它运行得非常好！ - Alberto Molina

太好了！如果这个答案对您有用，请接受它。 - olore

我正在尝试使用您的解决方案，但是遇到了问题。 - Ehsan

新的CopyPlugin([ { from: './img/*', to: 'img', force: true}, ]) - Ehsan

它可以工作，但是复制文件时没有进行图像优化。 - Giovan Cruz

Answer 2

还可以通过JavaScript导入图像。

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

- CrowScript

Answer 3

我曾经遇到过这个问题。我不知道 file-loader 只有在运行构建时才会复制图像，而在使用 webpack-dev-server 时不会执行任何操作。我的解决方案很简单：

$ npx webpack

- Kewyn Vieira