I maintain webpack, ask me anything!

I'm Sean,

I maintain webpack.

I work on Microsoft Edge DevTools.

I love πŸ”s.

Ask.

Me.

Anything.

:-D

Did you find this post useful? Show some love!
DISCUSSION (104)

If someone wants to become a core contributor on a popular open source project, what would you recommend they do to get started on that path?

Maintaining a project In my opinion takes a lot of passion and love for it and it's users. So with that in mind, I'd say picking a project that you really really really enjoy.

I love webpack, the experience it gave me, and most days I can't stop obsessing about it πŸ˜‚.

I guess to answer the second half is: show whatever existing team that you want to help and build and create the relationships with them over time. Gaining trust is part of how new responsibilities are handed over to potential maintainers.

Great advice. How do you keep up the motivation to keep contributing to the project?

What motivates me more then the project itself is the people behind it.

A great example. I've been working to empower and create communities outside of the US for webpack. Specifically, Africa. I had recruited some very passionate and excited individuals who wanted to lead the efforts to help grow and teach the communities there and represent their voices (in many places where I cannot). So we met and talked about a few things and some take away items. This morning, I got this image in my twitter DM's:

webpack-africa's logo

This left me with watery eyes and a sense of overflowing joy and pride just being able to know that there are people out there who are just as passionate and excited to help grow and build a more vibrant, diverse, and inclusive community, even globally. At the end of the day if I can change one persons life for the better, I've won. And open source and the incredible blessings it has provided me, have been the perfect vessel to continue that mission.

How did you communicate to your employer that you have outside interests/pursuits that have nothing to do with the company? Along the same lines, how do you manage your time between your day job, your OSS maintenance, and your other interests?

When I was at Mutual of Omaha, I was very up front with them about my passion for maintaining webpack, working on open source, and speaking at conferences.

Because of that honesty I think that they were more flexible and generous with the amount of time I could spend on OSS and speaking.

How do I manage my time? Honestly I don't whatsoever. There are some days I feel I'm constantly under water. (Which may sound scary, but in fact, it's an open source authors greatest asset for new contributors as long as you work hard no matter what you do). If people see me drowning, they always reach out their hand. Many of our most active contributors we're drawn to us this way.

Sean: can you please tell me, in great detail, exactly why React is better than Vue? :)

Mark to me, I'll boil it down to a few things.

Ecosystem: Vue is a grass roots community driven project. They have no business incentives. Because of this, we see things like:

  • Supported router - This is maintained by the Vue team, doesn't have breaking churn, and is an incredibly nice experience.

  • Solved completed and maintained state management - Because of this it works seamlessly with a Vue app. Most of us know...a React app looks completely different then a React+Redux app. or React+StateManagementLibrary app.

  • Great interaction with community best practice build tools (like webpack). Code splitting in Vue takes one line change.

import Component from './vue-component.vue';

to

const Component = () => import('./vue-component.vue');

Its these kind of small and juicy details that screams "We give a shit about the people who use our project and they are always first when it comes to the innovation we bring".

Syntax: Single-file-components are the future of dev in my opinion. Not only are they backed by webpack to create a killer Hot Module Replacement experience out of the box, but they also allow you to write the JSX to have fluid composition if you need to. Most cases I've found that the familiar and rich system that Vue single file components provides is usually enough for me in most cases to never have to write JSX.

Tooling: The tooling behind vuejs for vscode etc is incredible.

A feature difference that sets them apart is their eventing systems also and "dependency detection".

So instead of having to use a bunch of componentWillUpdate, Vue automatically tracks what state has changed and saves the users the cost of needed to do these kind of things in React.

See here:
Reactivity in Depth

Oh and. There is nothing you cannot do in Vue, that you can do in React.

  • JSX? Check
  • HOC? Check
  • Jest/Enzyme? Check (Enzyme => Avioriaz)
  • Context? Check

So to me it's like: If you are going to choose React as a project, just use Vue instead!

UPDATE: I just realized you asked why React over Vue. lol. In which (comments below have shown me its vice versa). Sorry!

Well I can say this:

React right now is better then Vue in only one way that I can think of. It's ecosystem has a pure native solution that is pretty strongly maintained. Right now Vue has Weex and NativeScript, but I'd like to see Vue/Evan write an official Native Renderer. However that would take a lot of time, and probably not on the roadmap for vue.

Yeah, I figured you either deliberately or accidentally misread the question :)

I love how he asked "why React is better than Vue" and you answered "why Vue is better than React" :-D

Easiest way to be right is to answer the question you wish was asked.

Ben Halpern DEV.TO FOUNDER

Hey there, we see you aren't signed in. (Yes you, the reader. This is a fake comment.)

Please consider creating an account on dev.to. It literally takes a few seconds and we'd appreciate the support so much. ❀️

Plus, no fake comments when you're signed in. πŸ™ƒ

As someone unfamiliar with Microsoft Edge, what sort of innovation is the browser bringing with it?

As for the agriculture and farming world, are there any innovations there that you are particularly interested in?

Right now, as we speak, we are working on Remote Desktop Protocols and Remote Debugging APIS. This really excited me because it opens up the opportunity for us to debug edge on every windows device. Xbox One X, Hollolense, and Everything!

So that testing story will be fun playing with the super secret hardware dev kits 😎.

If I had any it would be an easy way to harvest pumpkins. Like, common. We need that.

Hey Sean! What or WHO got you into farming?!

Well Ive always loved working with my hands. So woodworking, gardening, etc. I'm even obsessed with collecting Orchid Species.

That's awesome! Have you ever incorporated this into developing?

I haven't yet. Haha although looking at all the hobbiest orchid, woodworking, etc forms, they all are pretty painful interfaces and experiences. I'm sure it would be a great way for me to chip in to an org like that.

It's funny, I grew up as a chicken farmer. Imagine 3 large barn-ish buildings with 35k-50k chickens in them. There are obvious reasons I moved on. I now enjoy getting eggs from our neighbor 3 doors down. Ha!

But I in my first 10 years of working I was a Kitchen/Bath/Home remodeler with cabinet/various woodworking projects thrown in.

The last 5 years I've been in software and web development.

We recently bought a home built in the 1920s and I find there are many correlations between software architecture and well-built home architecture. In a home, you have various systems. Electrical, Plumbing, HVAC, Structural framing, etc. Those all easily translate into a well-built software application. The planning required for both is just so similar.

The similarities become even more hard to distinguish with a poorly built home or software application. The lack of planning for how those systems will work together as a cohesive system becomes really problematic.

Did you have any other names for Webpack before it became Webpack? How did you come up with these names? I've personally nicknamed Webpack on my system "Ninjastuffs" because it does a heck of a lot faster than I've seen with others - so it's ninjastuffs to me.

Yes before webpack Tobias Koppers the original author called it modules-webmake. See the bottom of our github Readme for the full story behind webpack. 😍

What are your responsibilities at Microsoft?

I am a Technical Program Manager for the Web Platform Team. Edge DevTools is team inside Web Plat that I am on and I'm responsible for helping create a new image, engagement strategy for Edge DevTools.

In addition to that I'm also responsible for landing, managing, defining new features for Edge DevTools. Also working with Standards Bodies on features that every browser should be conforming to.

On the side, since webpack is the number 3 most used JavaScript OSS project at Microsoft, I'm also working all the time with internal users and helping ensure their challenges and unmet needs are solved. Currently as we speak I've connected one of our Outlook Web team engineers with our project and we are working on making some significant build time contributions to the webpack also.

We use webpack with watchers to continually rebuild css + Javascript. The project we're working on actually has multiple sites each with their own webpack config, so we actually have one webpack worker running per site - currently that means 6 different workers all watching the files.

This is putting quite a bit of load onto our dev machines - and we'll need to add more sites as time goes by. Do you have any advice on how we can keep the ability to have the js + css built continually but without adding too much load to our boxes?

It seems like a unique challenge. Whenever I try and figure out ways to optimise webpack I boil it down to "how can we do less work". Tools like DllPlugin are a great approach to this and may work for you. If not, put in a github issue! We want to help you innovate these kind of challenges.

Hey Shaun! Can you give us a brief history of your software career to date?

Haha. It will be very brief. (This is taken from my AMA page on GitHub

After I graduate college with a Parish Music degree, I moved to Nebraska where my wife is from, and while looking for a viable career (protip: unless you are extremely talented, you cant do much with that degree), I decided to take a technical support role at MacPractice, Inc. This is a SMB/Startup that make native Mac medical management software.

At heart, I am an extremely personable person, and quite the talker, so after about a year, breaking all support records, a couple awesome raises and becoming the most skill support representative for this software in house, I hit a brick wall.

One day I realized that, constantly, I was having to work people around the same software defects in our product. I wanted to fix peoples problems, rather than work-folks around them.
This was the motivation initially.

So I started learning programming by applying my work directly to my support role. First started by learning how to write AppleScript to use our computer softphone and automatically dial support numbers with just a keystroke.

As I learned it more I started to speak with developers in-house (Obj-C) and one suggested I look into Ruby.

I learned as much as I could from ruby, and really learned to love the non verbose, duck typed language. I realized quickly that this was something that excited me, and that I could pickup.
I expressed interest in becoming an Obj-C engineer and was asked to start learning it. After another 1.5 years of side by side tech support (meeting all quotas) & QA'ing software, I was learning Obj-C.

I then lobbied my boss and engineering VP if they would consider me promotable to this role.

I was told yes, but was given a series of tests to accomplish before it would have to happen. After a few months of dragging their feet on the approval process, I had completed the tasks (implementing a live chat system (combination of OS ViewControllers, WebViews and JavaScript)), and earned the promotion.
Then I had the opportunity (and now title), to work in a few other places, drop in my lap.

tl;dr look at my linked in profile for the rest of my job history.
I've now reached my 3rd official year of programming and 2nd full year of ft JavaScript. At this point I was working at mutual of omaha, and really this is where my open source experience took off being apart of webpack, and other projects.

But that is really as much to date as I can think of.

Do you use Edge as your default browser? Should it also be my default Browser?

I do use it as my default browser!!! What has blown me away is how fast improvements get made for things like performance, stability, etc. And so I've really enjoyed Edge since the last insiders build that shipped!

As for you, try everything once, and then use what compelles, and engages you the most.

I've heard you are a farmer + developer, which is literally my end game.

How did you do it?!?

Or more specifically, if you'd prefer, what similarities in both do you see and how does one help the other?

Do you find farm work and programming compatible in terms of scheduling, or do you often have to choose one over the other?

When I was still living in Lincoln, Nebraska the laws for owning birds and chickens is pretty flexible and loose.

So it only took owning a house, building a coop, and filling it with birds. I might say urban farmer.

What is your favorite chicken breed and why? :)

Ugh really hard question. Instead I'll just put a few of my favorites.

Ayam Cemani - Pure black breed because of genetic mutations
Black Copper Marans
Mille Fleur d'Uccle Bantam
Speckled Sussex

Ayam Cemani are pure beauty! They look like ninjas!

Ayam Cemani is definitely my favorite!

Hey Sean, thanks for doing this AMA!

Can you expand on your love of πŸ”s and farming in general?

I feel very disconnected from agriculture and animals β€” sitting here behind a computer all day β€” so I'm curious about your experience given that you have a career in tech alongside this entire other perspective and life experience.

Well I think the connection really likes with being in tune with the source. The source of the food we eat. The source of the code we write. I also wanted to breed chickens. they are perfect specimines for genetics studies as their young hatch in 21 days. So it's awesome to see and study how chicken breeds have evolved over time.

Sean!! Two Qs for ya:

  • Have you dabbled in hardware since I/O?
  • What's your approach to pair programming?

OMG NO IVE NO TIME 😭😭😭😭😭😭

My approach is to foster an environment that enables the mentee to go from Deer in Headlights, to brave enough to try anything and ask any questions. Most of the time I've seen the problem with paired programming is that it puts developers in either role in a nervous state and doing anything I can to remove that is super effective in the learning experience.

This may have been me. But then, I see something and I'm like ILL DO THAT SOME TIME.

Buys $50 of components of Ali Express.
Puts on shelf

Yep, that's pretty much how I felt the first time I went to a user group and someone introduced me to pair programming / TDD. I just sorta.. stared at the screen for a few minutes. It was really weird having someone watch what I was typing. I think I was convinced they were gonna yell "WRONG!". lol, but it went fine.

Any guidelines or resources for turning an existing project to an open source project?

Not specifically, however I will say this.

If you open source something. You need to be prepared to foster growth and love the users and community behind the project. And no matter what, anything you do for the direction for that project should be to help drive your community forward.

What is the worst part about raising chickens?

Cleaning the coop. πŸ”πŸ’©

I haven't followed Webpack closely in a while, but we are going to look to integrate it via Rails' Webpacker gem. What's the latest for the project? What pain points from previous versions may have been resolved?

webpack 3.6 is the latest! We've solved a lot of bugs in regards to Scope Hoisting (ModuleConcatenationPlugin). 3.6.0 is definitely the most stable version of webpack we have so far.

For the rest of the breaking changes we want to land, they will all be pushed into webpack 4.

side note: webpacker is great! I've migrated a project from the asset pipeline to it and I would never turn back. Still have to keep the asset pipeline for ActiveAdmin though :(

Webpacker has an awesome set of defaults, I wish it were "language agnostic", a sort of a webpack starter kit.

One of the most difficult part of webpack is learning how to configure it. Particularly, setting up loaders for different workflows. I heard many times from devs that they don't understand how to configure webpack because of the config file. Anything thoughts on how to improve the setup workflow for new/expert people?

Also, what's your opinion on javascript assets loading for an HTTP2 world? Code splitting, aggressive splitting, ES6 import all the things?

One of the most difficult part of webpack is learning how to configure it.

I would say this is one of the biggest misconceptions out there and I believe it boils down to fundamentals.

Most people fear the config because they don't realize:
It's just a JavaScript object that is module.exports'd.

somefile.js

module.exports = {

};

That's a webpack config ^ .

In addition to that, I think that really people not understanding the module ecosystem, why it exists, and why we write with modules. If you've never written a CommonJS, AMD, or ES Module before, you certainly are going to have a stronger uphill battle in understanding why webpack is awesome.

In terms of the configuration properties itself, we have bent over backwards creating webpack.js.org/configuration and keeping it strictly up to date to ensure that people understand what each property does or should do. IF NOT, please please please please please please please put in an issue to our docs GitHub. We consider even issues to be significant contributions!

Thoughts on HTTP2...

H2 makes bundling even more powerful. Instead of shipping 6-7 bundles/assets to a page, now you can ship 20-30 of them.

BUT THE KEY TO WEB PERF IS SHIPPING LESS CODE.

So these 20-30 JavaScript bundles shouldn't ever add up to anything more then 250kb UNCOMPRESSED. I challenge anyone to do that, and see how impactful it can be on your project and web load time.

Unfortunately lots of libraries push the code size way beyond 250kb. jQuery by itself is more than 250kb

Exactly. And really that is why we see a lot of slow web today.

Hi Sean! Thanks for being open to questions <3

I'm trying to use an a tag to download a .rdp file. This works fine with an image but not with the file I need. Do you know if there's a webpack loader that can accept .rdp ?

Thank you!


<a :href='../assets/access.rdp' download>Remote Desktop</a>

There might be, but if there's not you could always write one and then open source it to webpack-contrib!!! webpack.js.org/API/loaders

What was your motivation when you first started contributing to open source projects?
How would you suggest which project to pick when people are just starting to contribute to open source?

So crazy enough, my first open source contribution was way before I was working on webpack. It was a weird Ruby gem, and I noticed a bug. So I put in an issue and the person said: Make a PR. So I googled "Make a PR", followed the steps and fixed it! XD

I guess sometimes I'm so blindly brave that contributions have never been scary to me. I always wear mistakes on my wrists so I think "wow this could be a great way to get mentorship from someone else even if I bomb it".

Thanks Sean. It's the scary part that keeps most of the people away from open source.

Exactly. I think the more we celebrate the mentality of failing as a growth opportunity. The more open source will thrive.

hi,Sean.
i use DllPlugin to produces bundle.dll.js and put it on cdn.
then,i use externals extract the library,but there is an error i dont understand

  • webpack.bundle.dll.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        bundle: [
            'vue',
            'vuex',
            'axios',
            "vue-router"
        ],
    },
    output: {
        path: path.join(__dirname, 'dll'),
        filename: '[name].dll.js'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'dll', '[name]-manifest.json'),
            name: '[name]',
        }),
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            comments: false,
            compress: {
                warnings: false,
                drop_console: true, //no console
            }
        }),
    ]
};
  • webpack.config.js
externals: {
    'vue': 'vue',
     "vuex": 'vuex',
     'axios': 'axios',
     'vue-router': 'vue-router'
},
new webpack.DllReferencePlugin({
      context: path.join(__dirname),
      manifest: require('./dll/bundle-manifest.json')
})

the error

index.min.js?b40cc7a554404568b02b:2844 Uncaught ReferenceError: vue is not defined
    at Object.<anonymous> (index.min.js?b40cc7a554404568b02b:2844)
    at __webpack_require__ (index.min.js?b40cc7a554404568b02b:689)
    at fn (index.min.js?b40cc7a554404568b02b:110)
    at Object.<anonymous> (index.min.js?b40cc7a554404568b02b:5096)
    at __webpack_require__ (index.min.js?b40cc7a554404568b02b:689)
    at fn (index.min.js?b40cc7a554404568b02b:110)
    at Object.<anonymous> (index.min.js?b40cc7a554404568b02b:13318)
    at __webpack_require__ (index.min.js?b40cc7a554404568b02b:689)
    at module.exports (index.min.js?b40cc7a554404568b02b:790)
    at index.min.js?b40cc7a554404568b02b:793

Anyone who has worked with Webpack will know just how horrible it was to learn and get used to. The made-up-on-the-spot terminology. Confusing, lacking and unempathetic documentation. Configurations using bizarre syntax contained in a single string. Mega-ultra hideous configurations, even for simple projects and boilerplates. Unintuitive naming conventions. Lack of useful tooling. Lack of GUI's.

What is being done to bring Webpack back into the real world where real human beings desperately struggle through the process of learning this unwieldy, fragmented, clustertruck of a tool?

Anyone who has worked with Webpack will know just how horrible it was to learn and get used to.

Hey Jake. First, thanks a lot for the candid feedback. It's stuff like this which continues to set the bar high for us.

The made-up-on-the-spot terminology. Confusing, lacking and unempathetic documentation.

I can't speak as much for the terminology, but I know naming are hard. What's incredible to me is that if you feel you have some great ideas or suggestions, then your are simply an issue or PR away from webpack's next great contribution. So I totally urge you to submit one with some ideas.

In terms of our documentation, we know that webpack 1 was pretty bad, but when we released webpack 2, we considered our documentation the number one feature of the release. If you haven't checked it out yet, go to webpack.js.org/. Also if you have suggestions or ideas that can help us better empathize with developers here also, we yearn for your feedback.

Configurations using bizarre syntax contained in a single string. Mega-ultra hideous configurations, even for simple projects and boilerplates. Unintuitive naming conventions. Lack of useful tooling.

This is one of the hardest things we struggle with as maintainers & users of this project. The single handed largest trade-off to JavaScript as configuration is that, like all code, can be written extremely poor. My advice for now is to try and treat your webpack config with the same amount of scrutiny that you do the rest of your code. That way it is readable, approachable, etc. I cover this in a course I did on webpack.academy/!

I'm not quite sure what you mean by lack of tooling, but I definitely know that having some sort of UI or VSCode integration would be a killer feature to add to webpack in some way or another. Again, feedback, ideas, RFC's, and simply communicating with us on GitHub, etc can really help getting these great ideas flowing.

What is being done to bring Webpack back into the real world where real human beings desperately struggle through the process of learning this unwieldy, fragmented, clustertruck of a tool?

Every day, we try and work with Framework Authors, users, contributors, even browser vendors to try and empathize on a variety of different levels to understand what we can do to continue to innovate not only the performance, and internals, but also public facing API's.

To be honest, the passion burning through this paragraph makes me believe you'd be a huge positive impact on webpack through your ideas and contributions. Doesn't have to be code either, bring your best skills, and make some real positive impact on the 5million users and 9million monthly downloads that use webpack.

Hey Sean! What new features on webpack are you working on and what are you most excited about?

Our new plugin archetecture is going to be. πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯

Also webpack 4 bringing the side-effects optimizations for es modules.

Take a look at medium.com/webpack and check out the Freelance Log Book which has our journal of weekly progress!!!

Sweet!! Recently made first effort to build plugin so excited to see what's new there!

Hi Sean, I'm Sean o/

While I haven't personally used webpack a bunch for my own projects, the work it's done for others has been great and I thank you for that :D

You mentioned below that you're also on the Web Platform Team for Edge and that you like the idea of single file components. So I was wondering if you like the idea of HTML Imports and Custom Elements. On UserVoice they are both still "Under Consideration" with Low and Medium priorities currently and was wondering their progress.

Side note: Why can't I log into the Edge UserVoice with my Microsoft account?

Although it says "Under Consideration" on the feature itself, it doesn't mean we aren't laying foundational api's and components internally to support these features in the future.

Something that we love doing is building in the internal render, paint capabilities and then reusing them for later features. So for now, Under Consideration is the best I can tell you (specifically it's not a feature I'm working on or owning as a PM either so I don't have that much info off hand). In terms of user voice, you should be able to use a Microsoft Account, if not, you can try and use the Windows Feedback Hub instead!

Hello Shaun!
Recently, I've research Node core shim library that are used by webpack/broweser.

webpack's node-libs-browser have been partially old.

Does webpack team have a plan about this module ecosystem?

Classic DEV Post from Jun 27

What good habits are you trying to adopt?

...

READ POST
Follow @ben to see more of their posts in your feed.
Sean Larkin
Member since Dec 29, 2016
Trending on dev.to
Service Workers
#javascript #es6 #pwa
Lets Build Web Components! Part 1: The Standards
#webcomponents #customelements #javascript #html
$1m to pay open source maintainers on Tidelift
#opensource #javascript #python #java
The StackΒ : Making a free open-source disposable email service prototype (inboxkitten.com) in 14 hours
#opensource #serverless #javascript #vue
Finally in Promises & Try/Catch
#javascript #learning #programming
That's one small step for a developer, one giant leap for the web
#javascript #webdev
What is the difference between Methods, Computed, and Watchers?
#explainlikeimfive #vue #javascript
Updating Background with SpeechRecognition & Custom Properties
#css #javascript #speechrecognition