how-to-use-webpack/

[utterances-bot]

webpack Tutorial: How to Set Up webpack 5 from Scratch | Tania Rascia

webpack used to be a frustrating and overwhelming beast to me. I felt safe using something like to set up a project, but I avoided webpack…

https://www.taniarascia.com/how-to-use-webpack/

[mefaba]

Thanks

[dvbsknd]

Wonderful, thank you.

[flagoon]

I love tutorials like that. From zero to hero. Great job. Now I have to check out rest of you blob.

[yonycalsin]

Great, thank you.

[TheLandolorien]

This is perfect! I was struggling to figure this out last weekend to transition from grunt/gulp to webpack. This made everything make sense in a nice, neat package. Thanks!

[harryheman]

Thanks for this tutorial

[bboydflo]

to install html-webpack-plugin for webpack 5 (according to the docs at this moment, october 2020) you should do:

npm i --save-dev html-webpack-plugin@next

[ashleyo]

Thanks, Tania, really useful. Webpack still seems like an awful lot of faffing around compared with parcel, tho'. I have a feeling that I will keep reaching for the easy option.

[athisii]

Nice. Thank you!

[minmaxdata]

Have you reviewed this carefully - c

ould remove defaults like - Using entry: './src/index.js': you can omit it, that's the default. Using output.path: path.resolve(__dirname, 'dist'): you can omit it, that's the default. Using output.filename: '[name].js': you can omit it, that's the default.

https://webpack.js.org/migrate/5/

[taniarascia]

Yes. Since this is a learning article, I chose to be explicit about the input and output properties, as Webpack is very confusing for beginners and introduces a lot of new concepts, and the defaults would be just one more assumption.

[uweguenther]

Great tutorial Tania. Thanks a lot for your great work.

You may want to add to the section

Clean

...

Install the plugin.

npm i -D clean-webpack-plugin

[shebekocom]

hi, dont work life reload page after update, why?

[khoists02]

How can i use hot reloaded with webpack, i have config same your below but i can't see anything change when i did ?

[shebekocom]

when you use this config, then updating the browser page works, and when you apply this config to your own, the page does not reload, and how will html-loader work here, connecting pictures from html?

[glook]

if you write your code in typescript its better to try mine webpack 5 boilerplate https://github.com/glook/webpack-typescript-react

[nasrob]

Thank you for this tutorial

[sskityum]

use devtool could you describe?

[nomodule]

Thanks, nice tutorial!

P.S: @babel/preset-env is mentioned two times in this command. http://prntscr.com/vkj28s

[taniarascia]

Thanks, I'll fix that!

[Pawelh133]

I was wondering about rule:

{
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
        type: 'asset/inline',      
},

i see it converts svg to base64 and injects it into js main file. What can affect on efficiency and also on quality. am I correct? Mabye better way is to add svg into 'asset/resource' rule or just create 'file-loader' rule like:

 {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          outputPath: 'images',
        }
      },

What do you think? Good tutorial. tnx!

[Seblon]

Hey Tania,

Thank you for a splendid and up to date tutorial!

How can I use this together with more than one html page? Right now it isn't very usable if I can't use the setup with any number of other "non-dynamically created" html files.

I've tried to manually create an html file in ./src/ and import it into the ./index.js file but I keep getting an error: "Module not found: Error: Can't resolve './some-file.html' in ..."

Cheers! //Sebastian

[Seblon]

Found a solution here, thanks: https://github.com/jantimon/html-webpack-plugin#generating-multiple-html-files

[silvanet]

Great tutorial. I'm a bit confused on a couple of points. For me the code:

class Game { name = 'Violin Charades' } const myGame = new Game() const p = document.createElement('p') p.textContent = 'I like ${myGame.name}.'

caused no error before or after the .babelrc addition, and nothing ever rendered on the DOM. Was it supposed to create a paragraph?

The second I'm working to iron out: your creation of the dev and prod configs at the end here. I'm studying your webpack 5 boilerplate to see if I can unravel it.

Thanks for your great work.

[silvanet]

My code successfully compiles, but the only thing that displays is the appended h1 heading node that reads Interesting! I get nothing rendered from the class Game node. No paragraph is created, and no text content shows. During the compilation, I get messages that the bundle.js file is emitted and so is the image. I can see them in the dist folder.

In the Chrome DevTools I only see that h1 in the root div, no paragraph.

Any idea what is going wrong?

[jamilansari]

Really Liked the article. Every thing explained in very beautiful way.

[MarnieWu]

Firstly，thank you for your greate tutorial article.

When I migrate webpack 4 to 5，meet some problems such like “xxx/thirdPackageName/@babel/runtime/helpers/esm” (probably because the origin is a '.mjs' file or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

How can I fix these problems？

[oles-bolotniuk]

Hey @silvanet, if you've not found the answer yet - I suppose that you forgot to append the created element to a page, the author does it like this:

const app = document.querySelector('#root')
app.append(heading, p)

So in your case it should be something like:

class Game {
  name = 'Violin Charades'
}
const myGame = new Game();
const p = document.createElement('p');
p.textContent = 'I like ${myGame.name}.';

const app = document.querySelector('#root');
app.append(p);

[silvanet]

Hey @oles-bolotniuk, thanks so much. I had been doing some searching and getting background information on using template literals. I had missed that the apparent single quotes surrounding the I like #(myGame.name). line were not single quotes at all, but should have been backtick (grave accents) ' ` '.

When I realized that, I changed them to backticks and then the code worked and properly rendered I like Violin Charades (of course after npm run build).

Thank you so very much. I had also experimented changing the constant name for the document.createElement('p'); line and had also noticed that I forgot to include both the heading and the paragraph in the final app.append code -- app.append(heading, p).

Going through problems and finding solutions is always a good learning experience. This tutorial had me going deep into Tania's Digital Ocean tutorials. She's been a treasure trove of help for all my further React learning tutorials.

[silvanet]

Sorry I'm having a brain freeze today. I was getting this working OK then went back through some of the earlier steps. I was checking the npm run build after creation of the .babelrc configuration and when I ran the rebuild I got an unhelpful error log apparently an ELIFECYCLE error errno 2 saying essentially webpack failed with an exit status 2. After some research I read I could --force the build. I tried that and got more precise information saying webpack-cli failed to load and could not find module clean-webpack-plugin. Yikes. Can I easily fix this? Even if --force had worked, I don't feel very comfortable with that solution.

[oles-bolotniuk]

Hey @silvanet, if you have an error that starts from could not find module... - you can check your package.json, if the plugin is mentioned in your dependencies list and if it is there - try installing modules again via npm install

You should also check the import section of your webpack config file where you import plugins - if the path to clean-webpack-plugin is correct and you have such a folder in your node_modules directory - maybe the issue is in how you import it, note the curly braces - it has to be like this: const { CleanWebpackPlugin } = require('clean-webpack-plugin') but not like this const CleanWebpackPlugin = require('clean-webpack-plugin')

If it won't help - you can share your webpack config file so we could take a closer look at the issue

[silvanet]

Thanks @oles-bolotniuk. I'll check pakage.json, re-install my node modules, examine my webpack.config.js file. I can't imagine how I could have screwed that up.

[jp-nullpod]

excellent article! Thank you

[bhanuunrivalled]

Hello @Tania we cant open this link any more want to read it

https://sitesmonster.com/interviews/tania-rascia-the-secret-is-just-do-a-little-bit-over-a-long-time

[ghost]

Hi ! Thanks for this great tutorial, i made a french translation here : https://cocoriweb.community/tutoriels/webpack-configurer-webpack-5-a-partir-de-zero.128/ ;-)

[jasurkurbanov]

Can I use your codes in personal and production projects ? It really useful

[jozeflacko]

the webpack-dev-server command is now webpack-serve --> should be: the webpack-dev-server command is now webpack serve

[taniarascia]

The article states that the command is webpack serve. The package is still webpack-dev-server.

[sk8Guerra]

Amazing! 🙏🏼 ¡Muchas gracias!

[jackchoumine]

thanks. help a lot.

[tranminhtamapp]

Thank you!

[neuronas]

@taniarascia I agree I think that the dash (-) should not be in "webpack-serve", lead to a confusion because as you said the command is "webpack serve"

[sathishvskumar]

Great article Tania. Thanks a lot.

[thegoodcode]

Nice Article! There is a problem with building it with webpack version 5 though, which states: "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema". The solution is to replace this line of code in webpack.config.js file: contentBase: path.resolve(dirname, './dist') with this: static: { directory: path.resolve(dirname, './dist') } Cheers!

[ccamaralbr]

Hi there Tania,

Great content as usual. Congrats.

Just got the same error after the last step setting up the devserver -> 'Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.'

Found a thread on https://gist.github.com/johnrichardrinehart/c8ec6ab1e60f39fc3b8dc738db649ec0 mentioning that

" according to webpack/webpack-dev-server#2958 (comment) contentBase was renamed to static "

It worked for me.

Cheers.

[nisancigokmen]

Wonderful, thank you :)))

[koraytugay]

Hey, thanks for the great article. Just to let you know, your CSS seems to be broken when you have list items in an info panel. Search "If you're upgrading from webpack 4 to" in this page and you will see what I mean.

[gauravsoni1]

Great post , if you guys are interested in a more video based course do checkout my course on Udemy, it covers the basics and goes to the advanced section such as micro frontends https://www.udemy.com/course/webpack-5-ninja-build-micro-frontend-and-web-apps/?referralCode=62147216E27BDFA5E807

[neoconstel]

Thanks a whole lot! I was having some real difficulty understanding just the basics of webpack, and even though I tried using several web resources including youtube it just wasn't presented well enough to stick. This really broke it down and took me from novice to confident level. I'll definitely recommend your blog, any day!

[alexandis]

Angular makes most of these things under the hood. But after upgrading from v13 to v15 I can't make webpack loaders work...