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
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