samedi 17 juillet 2021

Wrong img path with dublicated files creating build using webpack

i made a build according to guide, everything worked completely fine until i tried to load images, when i create build, i have my images where it has to be in build folder BUT, also i have some images created in root directory which actually contains a text but has image extensions.

Text in file: export default __webpack_public_path__ + "images/cat.8291b3f56d75a3368871a5ca1f2e0476.jpg";

For some reasons result index.html using root path files with photo extensions but not from image folder, i just started to learn webpack and have no idea why this is happening.

File stucture

enter image description here

My config file

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const isDev = process.env.BUILD_MODE === 'development';
const isProd = !isDev;

const filename = (ext)=> isDev ? `[name].[contenthash].${ext}` : `[name].${ext}`;

module.exports = {
    mode: process.env.BUILD_MODE || 'production',
    entry: './js/main.js',
    output:{
        filename: `./js/${filename('js')}`,
        path: path.resolve(__dirname, 'build'),
        publicPath: ''
    },
    plugins:[
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, 'index.html'),
            filename: 'index.html' ,
            minify: {
                collapseWhitespace: isProd
            }
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: `./styles/${filename('css')}`,
        }),
        new CopyWebpackPlugin({
            patterns:[
                {
                    from: path.resolve(__dirname,'assets'), 
                    to: path.resolve(__dirname,'build','assets'),
                    noErrorOnMissing: true
                }
            ]
        })
    ],
    module:{
        rules:[
            {
                test: /\.html$/,
                use:[
                    'html-loader'
                ]
            },
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options:{
                            hmr: isDev
                        },
                    },
                    'css-loader'
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader",
                  "sass-loader",
                ],
            },
            {
                test: /\.(?:|gif|png|jpg|jpeg|svg|ico)$/,
                use: [{
                    loader:'file-loader',
                    options:{
                        outputPath: './images',
                        name: `./${filename('[ext]')}`
                    }
                }],
            },
        ]
    },
    devServer:{
        historyApiFallback: true,
        contentBase: path.join(__dirname,'build'),
        open:true,
        compress: true,
        hot:true,
        port: 3000,
    }
}



Aucun commentaire:

Enregistrer un commentaire