For everyone who are stuck there - use package "path" to get absolute path of dist folder - for example: const path = require('path'); const entryPoint = 'src/script-1.js'; const outputPoint = 'dist'; module.exports = { //define entry point entry: path.resolve(__dirname, entryPoint), //define output output: { path: path.resolve(__dirname, outputPoint), filename: 'bundle.js' } }; You don't need to add path with npm, because webpack bring it with him it. (From 3+ version it's required)
For those people having problem with path... const path = require("path"); module.exports = { mode : "development", //Define an entry point entry: "./src/script-1.js", //Define an output point output: { path : path.resolve("./dist"), filename : "bundle.js" } };
so I moved on from Lesson 2 as per a suggested comment. Unfortunately, got stuck again. This time after inputting 'webpack' in terminal get alot of RED: [webpack-cli] Failed to load E:\ **my path**\webpack-playlist\webpack.config.js config [webpack-cli] ReferenceError: modules is not defined... anyone? Have things changes so drastically from 2016 to 2021 that this tute is not longer valid?
Receiving an error after setting up webpack.config.js and trying to run webpack to create dist folder and bundle. Error is "Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "dist" is not an absolute path!"
Hi,I am using vuejs with webpack.When i run webpack it compile all javascript+css+vuejs code in one file.But actually i want to load specific javascript for each component.For example if i click and call login component then only call login.css and particular javascript.But webpack combine all script in one file and load all code at once even those code which i don't need on require page.
I got this error when I run webpack "Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "dist" is not an absolute path!" . How should I solve this?
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "dist" is not an absolute path!
smart playa I was having the same error, found out you have to name the config file like "webpack.config.js" so the ".js" was missing, after fixing this it all went smoothly.
Man! This was driving me mad.. I could not figure out what i was doing wrong. I finally realized the .gitignore file was hiding the dist folder from me in atom. The exercise files come with node_modules and dist folder hidden, so if you run webpack and it appears to have worked, but you dont see the dist folder, and you are using atom... just remove it from .gitignore. I used the following code: const path = require('path'); module.exports = { entry: "./src/script-1.js", output: { path: path.resolve('./dist'), filename: 'bundle.js'}};
Receiving an error then try this code .. output: { path: __dirname + "/dist", // or path: path.join(__dirname, "dist/js"), filename: "bundle.js" } credits: #Earl Hans Geñoso(do like his comment ,he deserves it)
For everyone who are stuck there - use package "path" to get absolute path of dist folder - for example:
const path = require('path');
const entryPoint = 'src/script-1.js';
const outputPoint = 'dist';
module.exports = {
//define entry point
entry: path.resolve(__dirname, entryPoint),
//define output
output: {
path: path.resolve(__dirname, outputPoint),
filename: 'bundle.js'
}
};
You don't need to add path with npm, because webpack bring it with him it. (From 3+ version it's required)
For those people having problem with path...
const path = require("path");
module.exports = {
mode : "development",
//Define an entry point
entry: "./src/script-1.js",
//Define an output point
output: {
path : path.resolve("./dist"),
filename : "bundle.js"
}
};
This was extremely helpful and well explained. Thank you for taking the time to make these tutorials.
I really like his little intro with the ninja.
output: {
path: require('path').resolve("./dist"),
filename: 'bundle.js'
}
so I moved on from Lesson 2 as per a suggested comment.
Unfortunately, got stuck again.
This time after inputting 'webpack' in terminal get alot of RED:
[webpack-cli] Failed to load E:\ **my path**\webpack-playlist\webpack.config.js config
[webpack-cli] ReferenceError: modules is not defined...
anyone? Have things changes so drastically from 2016 to 2021 that this tute is not longer valid?
Receiving an error after setting up webpack.config.js and trying to run webpack to create dist folder and bundle. Error is "Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "dist" is not an absolute path!"
try this code ..
output: {
path: __dirname + "/dist", // or path: path.join(__dirname, "dist/js"),
filename: "bundle.js"
}
// another working example
const path = require('path');
module.exports = {
entry: "./src/script-1.js",
output: {
path: path.resolve('./dist'),
filename: 'bundle.js'}};
thank you
this one works!thank you so much!
@ Solaire Phantom thanks. this code worked.
Hi,I am using vuejs with webpack.When i run webpack it compile all javascript+css+vuejs code in one file.But actually i want to load specific javascript for each component.For example if i click and call login component then only call login.css and particular javascript.But webpack combine all script in one file and load all code at once even those code which i don't need on require page.
can you please help me what web server you have used for video, it will automatically refresh browser while you change in the code
Sauce folder :D .... Love your videos shaun. Thank you so much for making these
I got this error when I run webpack
"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "dist" is not an absolute path!"
.
How should I solve this?
If you are receiving an error message about the path use this:
output: {
path: `${__dirname}/dist`,
filename: "bundle.js"
}
Thanks!
Hi, what's the font used for you IDE? It looks good. :)
Thanks for your video.Very well explanation :)
hi, what is this font that you use on your text editor ?
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "dist" is not an absolute path!
output file name not configured
smart playa I was having the same error, found out you have to name the config file like "webpack.config.js" so the ".js" was missing, after fixing this it all went smoothly.
thanks i figured it out. I just named it webpack.js without the config
i changed the file name and it's still giving me the same message. help ?
Name it webpack.config.js
thanks!!
Man! This was driving me mad.. I could not figure out what i was doing wrong. I finally realized the .gitignore file was hiding the dist folder from me in atom. The exercise files come with node_modules and dist folder hidden, so if you run webpack and it appears to have worked, but you dont see the dist folder, and you are using atom... just remove it from .gitignore. I used the following code:
const path = require('path');
module.exports = {
entry: "./src/script-1.js",
output: {
path: path.resolve('./dist'),
filename: 'bundle.js'}};
Receiving an error then
try this code ..
output: {
path: __dirname + "/dist", // or path: path.join(__dirname, "dist/js"),
filename: "bundle.js"
}
credits: #Earl Hans Geñoso(do like his comment ,he deserves it)
2:20 RIP earphone users