DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Roger K.
Roger K.

Posted on

Do you know webpack?

Hi Gang,

I've been trying to learn Webpack for a while; the fact that I have been in forums for a while and asked for Webpack help and people always ask me if 'we can learn that together' is a testament that more people are struggling than those who know the topic.

I'd be really happy if someone could spend an hour this week with me to work through a couple setups that I imagine I'll use more than a few times.

The setup is relatively simple:

  1. Express/Node
  2. Pug/scss
  3. Webpack to do the magic build process

I intend to use some variation of this stack repeatedly so learning how to use Webpack with those tools and having it explained to me; the why this and how come that would allow me to really grow my knowledge, because let's be honest the hardest thing is getting that first cohesive effort together and then growing outwards from there.

Top comments (4)

Collapse
 
wolfhoundjesse profile image
Jesse M. Holmes • Edited on

In the beginning, each time I set up webpack I followed the documentation first to get it working at a basic level. Then I spent some time poking around in GitHub Repos to discover loaders people were using.

Another thing that helps is using google search tools to limit how far back you are searching as webpack loaders are constantly changing. For instance, there is some recent guidance to use mini-css-extract-plugin over extract-text-webpack-plugin for your CSS because of some compatibility issues with Webpack 4, and that comes with it's own caveat about style-loader. Here's a lengthy, informative article from May that has lots of information to gleam. Is it recent enough to be relevant? Only the JavaScript Lords know. 🀣

I may have some free time this afternoon or tomorrow (Sunday) if you want to dig into some of this stuff together, but hopefully someone else will come along and offer you a solid time. There are two musicians in this house, and that means running in all different directions this time of year, not to mention that Christmas season leads straight into contest season for brass bands! I've followed you so that we can DM.

One last thing; if getting comfortable with Webpack is holding you back from starting your next project, why don't you try splitting your time between absorbing the new tooling knowledge and tossing a project together with Parcel? I'm sure some folks would give the new guy the stink eye for being different, but it's honestly magical, for example, to have one dependency in your quick-and-dirty typescript project at the start and have it all come together.

Collapse
 
misterhtmlcss profile image
Roger K. Author

Hi! Yes I'd love to connect and absolutely I'll look at Parcel now. I was looking at it before, but it didn't seem so easy as advertised. I'll take a second look; my last look was a year ago. Message me when you feel you can confirm a time. I'll keep checking my messages.

Collapse
 
wolfhoundjesse profile image
Jesse M. Holmes

I felt the same way, but then this happened:

{
  "name": "react-typescript-by-example",
  "version": "1.0.0",
  "description": "A step-by-step example of building react apps with TypeScript and parcel",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "parcel build src/index.html",
    "start": "parcel src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.10.3",
  }
}

I mean, I don't even have my name on the thing. Ha! I thought it would get endlessly complicated once I threw react in, but:

"dependencies": {
    "parcel-bundler": "^1.10.3",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "devDependencies": {
    "@types/react": "^16.7.7",
    "@types/react-dom": "^16.0.10",
    "typescript": "^3.1.6"
  }

I added the react pieces from npm, but parcel took care of the typescript for me. There is some babel configuration hidden away, too. My first bump happened when I tried to write some tests with .tsx extensions. Keep in mind, this is just something I'm playing around with and not an actual process, but I got over that bump by adding this ridiculous typescript configuration:

{
  "compilerOptions": {
    "jsx": "react"
  }
}

It made me laugh.

Thread Thread
 
misterhtmlcss profile image
Roger K. Author

Haha. That's awesome. I'm watching a YouTube video on Webpack 4 right now. It's morning still in Calgary so I love me some programming vids while I'm sipping my morning coffee. I'm watching a Parcel one next ;)

🌚 Life is too short to browse without dark mode