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

时间:2020-10-14 11:10:18

标签: reactjs webpack webpack-dev-server

每当我运行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"
        }
    }
}

0 个答案:

没有答案