Webpack is not loading Css, Images and font - javascript

I am trying to load the Css, Images and fonts using the webpack. Here is my webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: "main.js",
path: path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
};
This is my package.json
{
"name": "restaurant-page",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.2.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {}
}
This is my index.js. When I uncomment the ./styles.css import I get the
main.js:290 Uncaught Error: Automatic publicPath is not supported in this browser in chrome console and my js imports doesn't work but it dosen't throw me error while building project when I run npm run build commmand in terminal. I tried using css import in each js module-- in home.js etc--file but that also doesn't work.
// import './style.css';
import { homeContent, removeIntroContent } from './Modules/home.js';
import { aboutContent, removeAboutContent } from './Modules/about.js';
import { reviewsContent, removeReviewContent } from './Modules/reviews.js';
const home = document.getElementById("home-btn");
const review = document.getElementById("review-btn");
const about = document.getElementById("about-btn");
homeContent();
home.addEventListener("click",()=>{
removeReviewContent();
removeAboutContent();
const id = document.getElementById("intro-content");
if(id != null) return;
homeContent();
});
review.addEventListener("click",()=>{
removeAboutContent();
removeIntroContent();
const id = document.getElementById("reviews");
if(id != null) return;
reviewsContent();
});
about.addEventListener("click",()=>{
removeReviewContent();
removeIntroContent();
const id = document.getElementById("about");
if(id != null) return;
aboutContent()
});
I have pushed the code to github if anyone want to look at file structure
Here is the link
ps: If I use the link tag to add css to html it works exactly as I want it to but that defeats the purpose of using webpack

I am having trouble with Webpack as well and I came across your question. I don't have a sure solution to your problem, but I hope to steer you in the right direction.
At first glance, I am wondering if editing your package.json file to use your webpack-config when you run 'npm run build' instead of the default webpack config. This could help activate the loaders you are trying to use, or atleast populate error messages that would allow you to investigate further. Editing your package.json would look like:
"scripts": {
"test": "echo \\\"Error: no test specified\\\" && exit 1",
"watch": "webpack --watch",
"build": "webpack --config ./webpack-config.js"
}
Your dependencies make sense and your file path for style.css seems correct, so I am wondering if Webpack does not know how to load your styles, fonts, images without your config file.
Can read more about Webpack configuration here.
https://webpack.js.org/configuration/
Hope I was able to help, good luck! If you have any further questions I'd be happy to help, as I'm learning Webpack too.

Related

Customize-cra config-overrides.js is not working

I am working on the create-react-app project with typescript. I am trying to use _ (lodash) globally. I followed manuals step by step trying to figure out how to do it, but without any success.
I followed this tutorial https://www.npmjs.com/package/customize-cra. My package.json contains between dependecies:
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"react-app-rewired": "^2.1.8",
"save-dev": "^0.0.1-security"
In devDependencies:
"customize-cra": "^1.0.0"
Based on tutorials I changed also scripts:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",...
My config-overrides.js is located in root folder:
const { addDecoratorsLegacy, override, disableEsLint } = require('customize-cra')
const webpack = require('webpack')
function myOverrides(config) {
if (!config.plugins) {
config.plugins = []
}
config.plugins.push(
new webpack.ProvidePlugin({
_: 'lodash',
}),
)
return config
}
module.exports = override(
addDecoratorsLegacy(),
disableEsLint(),
myOverrides
)
I try to use join(['Hello', 'webpack'], ' ') but failed with error.
TypeScript error in C:/Users/.../webapp/src/index.tsx(27,1): Cannot find name 'join'. TS2304
Does anybody have any idea what should go wrong?
Thank you.

rollup.js_Bundle automatic update

I'm trying to biuld bundling through rollup.js in VSCode.
My directory:
----MyProject
--------\node_modules
-----------\.bin
-----------\rollup
--------index.js
--------index.html
--------bundle.js
--------package-lock.json
--------package.json
In my .html file I have connection with bundle.js, all changes which I'm doing in index.js must automatically be updated in bundle.js. But it's only working when I run in terminal this command: rollup index.js --file bundle.js
My package.json:
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"rollup": "^2.34.2"
}
}
What do I need to do to make this system works automatically?
Firstly, I didn't have config file, so I've created rollup.config.js:
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
const watch = process.env.ROLLUP_WATCH
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
watch && serve('dist'),
watch && livereload()
]
}
Then I added these 2 scripts into package.json:
"build": "rollup -c",
"dev": "rollup -c -w"
And run in terminal: npm run dev
My credits to vladshcherbin for help!

npx webpack command cannot find module webpack.config.js

I'm following the official Webpack getting started guide and I get an error on the Using a Configuration section. It says to create a webpack.config.js file with:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
I then run the following command:
npx webpack --config webpack.config.js
The error I get is:
Cannot find module '/Users/Documents/Web_Development/tone/webpack.config.js'
The guide does not seem to give any ideas of what could be wrong here. Also my code editor is telling me there is an error with const path = require('path'); saying "Expected a JSON Object, array or literal;
My Directory structure:
webpack.config.json
package.json.lock
package.json
node_modules/
dist/
index.html
main.js
src/
index.js
package.json:
{
"name": "tone",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
The solution was to change the webpack.config.json file to webpack.config.js.
You have to make sure that the webpack.config.js file is in the root of your project.

Cannot find module "bundle.js"

I have a strange problem.... (Please, ignore my bad English :v)
I'm making app using HTML/CSS and js with jQuery. I'm using webpack too. I was using webpack-dev-server command since today - everything was working perfect. I wanted to generate single file - "bundle.js" without using server, cause i wanted to open app at another pc, without webpack.
That's how game looks like when it works
When I changed config in package.json from:
"start": "webpack-dev-server ./src/scrable.js"
To:
"start": "webpack ./src/scrable.js ./bundle.js"
I don't have any errors in my CMD console, when I typed "npm start".
But, when I opened my index.html file I saw in "source" mode that I have one error, which means that browser 'Cannot find module "bundle.js"'.
App is working, but not like it should - elements react for clicks, they're running some functions, but... just look at this:
That's how game looks like when it doesn't work
Do you have any ideas?
This is my package.json file
{
"name": "jstest_",
"version": "1.0.0",
"description": "",
"main": "scrable.js",
"scripts": {
"start": "webpack ./src/scrable.js ./bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}
And this is my webpack.config.js file
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/scrable.js",
output: {
path: __dirname,
filename: "bundle.js",
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
}
};

babel-loader 6.0.0 doesn't work correct

I am using webpack this is my
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app',
output: {
path: path.join(__dirname, '/public'),
filename: 'bundle.js'
},
watch: true,
watchOptions: {
aggregateTimeout: 100
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: "babel-loader"
}]
}
}
and this my file from entry point
app.js
import React from 'react'
without anything, just simple line of code.
When i am trying to run webpack from command line and i got the next error
app.js Line 1: Unexpected token You may need an appropriate loader to
handle this file type. | import React from 'react';
package.json
{
"name": "a-b-c",
"version": "1.0.0",
"main": "server.js",
"dependencies": {
"babel-loader": "^6.0.0",
"react": "^0.14.1",
"webpack": "^1.12.2"
},
"devDependencies": {
"babel-core": "^6.0.14"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
Also, when i changed ES6 syntax in my app.js file to ES5 then it works well.
Any suggestions?
Thanks in advance.
I've found out. The problem was with babel-loader and to fix this issue you need to install
npm install babel-loader babel-core babel-preset-es2015
and add to your webpack.config.js file next lines
loader: 'babel?presets[]=es2015'
Source of information
Thanks

Categories