Getting a 'TypeError: merge is not a function' error? Fix it by changing const merge = require("webpack-merge"); to const { merge } = require('webpack-merge'); Now it should work.
Yes, it is a version issue as it is working without the curly brackets in Webpack v^4.2.2 but not in v^5.1.1 : try putting merge between curly braces like this: const {merge} = require("webpack-merge");
The series is awesome... and some of the comments here addressing major issues after newer webpack versions really make me happy to read!... People here are awesome!
If you're running webpack5, you may need to change (in your package.json) 'webpack-dev-server --config webpack.dev.js --open' to 'webpack serve --config webpack.dev.js' Hope that helps someone.
Nvm, I see in the webpack docs webpack serve --open 'Google Chrome' The browser application name is platform dependent. Don't hard code it in reusable modules. For example, 'Chrome' is 'Google Chrome' on macOS, 'google-chrome' on Linux and 'chrome' on Windows.
Hey Colt, just wanting to say thanks for putting together this course it's seriously awesome! One thing I can't seem to wrap my head around is when to use --save or --save-dev on npm install... from all the documentation it seems like --save-dev is only for dev dependencies, and so ok that makes sense. But then there are occasions where you're installing something that you say is specifically for the production build and --save is not used, but --save-dev. If you (or anyone else in the comments) could help shed some light on this with me that would be so great!! TY in advance!
if you get a typeerror like this: "merge is not a function". This one helped me out: const { merge } = require('webpack-merge'); The important change is the bracket pair around merge --> { merge }.
You don't need it. There are very useful comments in the GitHub repo that solve all the updates needed. Just follow the commits and search for comments under the code: github.com/Colt/webpack-demo-app/commits/master
Apparently, `webpack-dev-server` with the latest version has issues and the "start" script in the `package.json` file does not work as expected in this video. Try to update the "start" script in the "package.json" with "webpack serve --config webpack.dev.js --open 'Google Chrome'" Here, "webpack serve" is the updated command instead of "webpack-dev-server" and "--open" needs to take an argument of browser name where you can mention 'Google Chrome' Another option is to add the "devServer" option to your "webpack.dev.js" file after removing the "--open" from the "start" script module.exports = merge(common, { ... devServer: { contentBase: "./dist", port: 3000, host: "127.0.0.1", open: true, }, ... }); and Thank you so much Colt for making such great videos.
Getting a "Error: Cannot find module 'webpack-cli/bin/config-yargs'" after installing webpack-dev-server, make your package.json start script: "start": "webpack serve --config webpack.dev.js --open" . It may help to solve it.
It's already included. The angular CLI already uses webpack behind the scenes to minify the bundles and some other stuff. You might need to create a webpack config to make modifications to the default webpack settings that Angular uses. That's something Colt could show.
Big fan of your teaching, Colt. Also, a skill to learn from you. Secondly, for others using webpack 5 , there will be few things broken atleast for now like web-dev-serve, follow this issue to fix it. github.com/webpack/webpack-dev-server/issues/2759 Try using `webpack serve` instead of `webpack-dev-server`
can i made one webpack.conf.js file build on process.env.NODE_ENV like if(development) {do something} else {do something else} or it's wrong and doesn't works???
Hi Zombie, that absolutely works! Sometimes your file can get quite large and difficult to manage if its all in one place with a bunch of env variables. But at the same time, it can be nice to see all your configuration in one place.
Yeah -- I was gonna say -- I've also looked on the web and found examples using "TARGET = process.env.npm_lifecycle_event", where the lifecycle event corresponds to the script running (build, start, etc.). You could combine this way with Colt's way by having one config file that imports others and merges them based on the lifecycle hook.
Getting a 'TypeError: merge is not a function' error? Fix it by changing const merge = require("webpack-merge"); to const { merge } = require('webpack-merge'); Now it should work.
Clutch money comment here
May the love of all saints bless you eternally lololo #savedMe
omg you saved me life big time! How does this change make sense? I mean, why does that fix it?
@@HavePort merge function from webpack-merge is not a default export therefore we have to use { merge } for named export.
Yes, it is a version issue as it is working without the curly brackets in Webpack v^4.2.2 but not in v^5.1.1 : try putting merge between curly braces like this:
const {merge} = require("webpack-merge");
best webpack course ever! :)
The series is awesome... and some of the comments here addressing major issues after newer webpack versions really make me happy to read!... People here are awesome!
UPDATE: For webpack 5.0.5 and up must use
const { merge } = require('webpack-merge');
to avoid error merge is not a function
Thanks!
Thanks a lot!
the best webpack course in youtube, thanks a lot.
Wow, this is brilliant stuff !
If you're running webpack5, you may need to change (in your package.json) 'webpack-dev-server --config webpack.dev.js --open' to 'webpack serve --config webpack.dev.js' Hope that helps someone.
thanks, it helped! :)
This really helped! Thanks for this. What about the --open option? What is the equivalent?
Nvm, I see in the webpack docs
webpack serve --open 'Google Chrome'
The browser application name is platform dependent. Don't hard code it in reusable modules. For example, 'Chrome' is 'Google Chrome' on macOS, 'google-chrome' on Linux and 'chrome' on Windows.
Are you a F&^%$ Hero or What!!!! THANKS
Thx !
this series is totally amazing! thanks ever so much!
Hey Colt, just wanting to say thanks for putting together this course it's seriously awesome! One thing I can't seem to wrap my head around is when to use --save or --save-dev on npm install... from all the documentation it seems like --save-dev is only for dev dependencies, and so ok that makes sense. But then there are occasions where you're installing something that you say is specifically for the production build and --save is not used, but --save-dev. If you (or anyone else in the comments) could help shed some light on this with me that would be so great!! TY in advance!
Wow dude, clear and useful. Interesting that way when you separate config files... love it!)
if you get a typeerror like this: "merge is not a function".
This one helped me out:
const { merge } = require('webpack-merge');
The important change is the bracket pair around merge --> { merge }.
9:38 The webpack logo works fine in the development server but it does not when we open the index.html file directly. Does anyone know why is that?
Why isn’t the ˋrunˋ-command needed for ˋnpm startˋ, when ˋnpm run buildˋ needs it?
stackoverflow.com/questions/51358235/difference-between-npm-start-and-npm-run-start/51358329
hello Colt - would you consider doing an updated version with any changes recently made to webpack?
You don't need it. There are very useful comments in the GitHub repo that solve all the updates needed.
Just follow the commits and search for comments under the code:
github.com/Colt/webpack-demo-app/commits/master
Sir, I have a doubt.
Why we are using npm start for dev
and npm run build for production?
What is the difference between npm and npm run?
So putting mode: 'production' automatically minifies the js for us?
you rock colt!
Why we are using merge? can not we use Object.assign to merge two objects?
Thank you for your course
Apparently, `webpack-dev-server` with the latest version has issues and the "start" script in the `package.json` file does not work as expected in this video. Try to update the "start" script in the "package.json" with
"webpack serve --config webpack.dev.js --open 'Google Chrome'"
Here, "webpack serve" is the updated command instead of "webpack-dev-server"
and "--open" needs to take an argument of browser name where you can mention 'Google Chrome'
Another option is to add the "devServer" option to your "webpack.dev.js" file after removing the "--open" from the "start" script
module.exports = merge(common, {
...
devServer: {
contentBase: "./dist",
port: 3000,
host: "127.0.0.1",
open: true,
},
...
});
and Thank you so much Colt for making such great videos.
Time saving, clear af! :))
**const { merge } = require('webpack-merge');**
You save me from hundreds of time wasting
7:34 "Guess ive closed it down... or im blind"
😂😂😂🤣🤣
Getting a "Error: Cannot find module 'webpack-cli/bin/config-yargs'" after installing webpack-dev-server, make your package.json start script: "start": "webpack serve --config webpack.dev.js --open" . It may help to solve it.
Can you show how to use webpack or how to include angular into webpack? Thanks anyway!
It's already included. The angular CLI already uses webpack behind the scenes to minify the bundles and some other stuff. You might need to create a webpack config to make modifications to the default webpack settings that Angular uses. That's something Colt could show.
What is the difference between using webpack-merge and lodash?
How to configure .env file in webpack, so that we can get .env variables into our .js file
hi dude..how to create multiple webpack file? i tried do it as the same webpack.dev.js and webpack.prod.js it shows a JS icon
doesn't matter -- all that matters is what file you specify in the loading script -- they're all js, just won't give you the icon.
This tutorial is amazing
Big fan of your teaching, Colt. Also, a skill to learn from you.
Secondly, for others using webpack 5 , there will be few things broken atleast for now like web-dev-serve, follow this issue to fix it. github.com/webpack/webpack-dev-server/issues/2759
Try using `webpack serve` instead of `webpack-dev-server`
Great Video!
It's a very good video indeed.
can i made one webpack.conf.js file build on process.env.NODE_ENV like
if(development) {do something}
else {do something else}
or it's wrong and doesn't works???
Hi Zombie, that absolutely works! Sometimes your file can get quite large and difficult to manage if its all in one place with a bunch of env variables. But at the same time, it can be nice to see all your configuration in one place.
Yeah -- I was gonna say -- I've also looked on the web and found examples using "TARGET = process.env.npm_lifecycle_event", where the lifecycle event corresponds to the script running (build, start, etc.). You could combine this way with Colt's way by having one config file that imports others and merges them based on the lifecycle hook.
Awesome!!!
webpack 5:
npm install webpack-dev-server webpack-cli
const { merge }= instead of const merge=
"start": "webpack serve --config webpack.dev.js --open"
use lower case contenthash instead of contentHash
Second: D
first
I had to use "start": "webpack serve --config webpack.dev.js --open", to get it to working