I maintain webpack, ask me anything!
source link: https://dev.to/thelarkinn/i-maintain-webpack-ask-me-anything-an8
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Posted on Oct 11, 2017
I maintain webpack, ask me anything!
I'm Sean,
I maintain webpack.
I work on Microsoft Edge DevTools.
I love ðŸ”s.
Anything.
Discussion (113)
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.
Thread
Thread
Great advice. How do you keep up the motivation to keep contributing to the project?
Thread
Thread
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:
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.
CollapseExpand
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.
CollapseExpand
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';
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.
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!
Thread
Thread
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.
Thread
Thread
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
Thread
Thread
Easiest way to be right is to answer the question you wish was asked.
CollapseExpand
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.
CollapseExpand
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?
Thread
Thread
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.
Thread
Thread
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.
CollapseExpand
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. 😍
CollapseExpand
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.
CollapseExpand
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.
CollapseExpand
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.
CollapseExpand
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.
CollapseExpand
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.
CollapseExpand
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!
Thread
Thread
Ayam Cemani is definitely my favorite!
CollapseExpand
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.
CollapseExpand
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.
The Practical Dev@thepracticaldevRemember that hardware project you were so excited about?14:19 PM - 02 Aug 201628994142
Thread
Thread
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
CollapseExpand
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.
Awesome, thanks for the advice.
CollapseExpand
What is the worst part about raising chickens?
Cleaning the coop. 🐔💩
CollapseExpand
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.
CollapseExpand
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.
CollapseExpand
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.
i agree with everything you said.
the point however that understanding all that AND figuring out the exact syntax needed in the config file AND sometimes also the order of things ( things that should go before other things) is very much a high bar for new developers.
very very high bar. only god knows how many developers quit web development all together in front of that fence.
Unfortunately lots of libraries push the code size way beyond 250kb. jQuery by itself is more than 250kb
Thread
Thread
Exactly. And really that is why we see a lot of slow web today.
CollapseExpand
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
CollapseExpand
Hey Sean, what exactly is Webpack's manifest? How can I see it? I'm trying to understand why I should move runtime into a separate chunk (optimization.runtimeChunk = 'single'). And can't reproduce this case where content hash changes with each build, with no changes in the project files. webpack.js.org/guides/caching/#out...
CollapseExpand
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.
Thread
Thread
Exactly. I think the more we celebrate the mentality of failing as a growth opportunity. The more open source will thrive.
Thread
Thread
CollapseExpand
Hi Sean! I'm trying to write a plugin (or loader) for Webpack, but think that I'm stuck in trying to understand hooks and compilation stages. Could you please help me with this question: stackoverflow.com/questions/539367...
I would be extremely grateful!
CollapseExpand
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
CollapseExpand
Hi Sean,
I'm a simple Angular dev and I've been using it for the last year.
Most of the projects I've worked (a total of 5 or 6), do use We pack, specially Angular-CLI projects.
Although I have seen webpack, I have no idea what it actually is.
Can you explain it to me and, give me some insight on how I can learn it to improve the projects in working on?
Thank you very much.
CollapseExpand
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!
CollapseExpand
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!
CollapseExpand
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?
CollapseExpand
whats it like going from a small town boy to living in the big city??
jk haha, thanks for being so welcoming to the webpack project!
how do you manage to be so available while still having a life let alone a growing family and full time job?
Well I grew up in Metro Detroit so "the big city" has always been in my veins. As seen above, I always am missing or behind on something. I really rely on giving more responsibility to those who want to step up and do more. It's been really fruitful.
CollapseExpand
Hi Sean!
What's your incentive to write JS for webpack? It's really comprehensive and compelling work!
Because I love the entire user experience behind it. I love its complete extensibility. To me its a specimin case study of event driven architecture, along with a complete pluggable system (internally and externally).
Those things are really interesting to me. I also love getting people to contribute, and be involved and have a sense of feeling and fellowship.
Thanks, and I wonder how can I gain the compelling programming skills like you? Haha...
Thread
Thread
Study the things you love obsessively and teach people about it! Blog, share, present, give talks. :)
Thread
Thread
Exactly, but sometimes I find time is too short and work is too busy. Maybe I need implement more useful ideas about time management, I will be more than gratitude if you give me some tips in detail . Thanks Sean!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK