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

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

抱歉我的英文。

这是我的结构： Structure from my sublime text

谢谢大家!!

Answer 1

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

使用CopyWebpackPlugin将文件复制到您想要的位置，这至少会删除您提及的“手动”部分
将图片引用移动到样式，webpack可以通过您正在使用的scss加载程序将它们拾取。例如
```
background-image: url("img/foo.png");
```

Answer 2

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

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

Answer 3

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

$ npx webpack

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

3 个答案: