图像文件未添加到“构建”文件夹

问题描述

每当我运行build命令时，我的图像文件都不会通过webpack添加到“ build”文件夹中。

在“开发”模式下，一切正常，但是当我将其部署为netlify时，所有图像均未显示。我尝试过使用“ write-file-wepback-plugin”仍然是同样的问题。

“ copy-webpack-plugin”也是如此，它仅将文件复制到build文件夹，并且在dev模式下，它工作正常，但在生产环境（托管版本）中则相反。 / p>

这是我下面的配置文件。

const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")

module.exports = {
    output: {
        path: path.resolve(__dirname,"build"),},resolve: { 
        modules: [
            'node_modules','src'
        ],extensions: ['.jsx','.js','.scss'] 
    },module: {
        rules: [
            {
                test: /\.(js|jsx)$/,use: ["babel-loader"],exclude: /node_modules/
            },{
                test: /\.s[ac]ss$/,use: [
                    {
                      loader:"style-loader",{
                      loader: "css-loader",options: {
                          sourceMap: true
                      }
                    },{
                       loader: "sass-loader",options: {
                           sourceMap: true
                       }
                    }
                ]
            },{
                test: /\.(png|svg|jpeg|gif|jpg)$/i,loader: "file-loader",options: {
                    name: 'assets/images/[name].[ext]',limit: 1000,outputPath: "assets/images"
                }
            },{
                test: /\.js$/,enforce: 'pre',use: ['source-map-loader'],}
        ]
    },devServer: {
        historyApiFallback: true,plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,"src","index.html")
        }),new WriteFilePlugin({
            test: /\.(png|jpeg|svg|gif|jpg)$/,useHashIndex: true
        })
    ],optimization: {
        splitChunks: {
            chunks: "all"
        }
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）