I want the logo png file to display
The image is supposed to load once the web pack is started right now I can only get the HTML, css, and some fonts while the logo does not display.
Error messages
Refused to apply style from 'http://localhost:8080/forkify/dist/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
test.js:5 Imported module
index.js:14 Uncaught ReferenceError: element is not defined
at eval (index.js:14)
at Module../src/js/index.js (bundle.js:398)
at __webpack_require__ (bundle.js:432)
at bundle.js:526
at bundle.js:529
logo.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
I have tried file and uri loader on the webpack but still having same issue.
index.js
import num from './test';
import '../../dist/css/style.css';
import Logo from '../../dist/img/logo.png';
// Add the image to our existing div.
const myIcon = new Image();
myIcon.src = Logo;
element.appendChild(myIcon);
console.log(`I imported ${num} from another module test!`);
Webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:'./src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename:'js/bundle.js'
},
// mode: 'development' // Dont compress or minify codes and enable quick loading
devServer: {
contentBase:'./dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
// More information here https://webpack.js.org/guides/asset-modules/
type: "asset/resource",
},
],
},
};
Package.json
{
"name": "forkify",
"version": "1.0.0",
"description": "Food app project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start:dev": "webpack serve --mode development --open"
},
"author": "BrewedLeo",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.0.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.20.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {}
}
I think, you missed in your webpack.config.json under rules outputPath like after test: /.(png|.... than define loader: 'file-loader', and insert path: options: { outputPath: 'images', } For me, it is easier with copy-webpack-plugin than you can copy files in your dist..
plugins: [ new CopyPlugin({ patterns: [ { from: "src/img", to: "img/" }, ], }), ]
...and element is missing
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.