blog.negative9.net/contents/articles/webpack-begone/index.md

77 lines
3.2 KiB
Markdown
Raw Normal View History

2018-03-11 11:15:42 +00:00
---
2018-11-02 21:26:53 +00:00
title: Webpack Begone, ES6 is HERE!
2018-03-11 11:15:42 +00:00
author: geoff-doty
date: 2017-12-24
template: article.jade
---
2018-11-02 21:26:53 +00:00
I know. I know. Blasphame, but I really hate [Webpack](https://webpack.js.org/), not the idea of it but what it turned web development into - a bloated tangled mess of **headaches you don't need**.
2018-03-11 11:15:42 +00:00
Lets take a jaded closer look...
2018-11-02 21:26:53 +00:00
## Webpack Rant
2018-03-11 11:15:42 +00:00
[Webpack](https://webpack.js.org/) became the defacto go-to solution to get the latest [es6](http://es6-features.org) javascript language functionality into a developers pipeline via transpilers like [Babeljs](https://babeljs.io/) and support the overly bloated non-standard web component soultion as the [ReactJS](https://reactjs.org/) framework (batteries NOT included). Sure [Webpack](https://webpack.js.org/) does more or can do more, but in the end developers just want to develop with [es6](http://es6-features.org) features, **however** this was only supose to be a temporay *polyfill*, until browsers started supporting the next version of Javascript -- ES6.
2018-05-03 04:03:29 +00:00
**ES6 browser support is [HERE](http://kangax.github.io/compat-table/es6/)**
2018-03-11 11:15:42 +00:00
99% of the browsers support it, even Microsoft Edge, Safari, Chrome, Opera, Firefox...
2018-03-11 11:15:42 +00:00
But WebPack left us for this constant jonesing that put a permanent handycap on web developers that reminds me of those old drug commercials
"I work more, so I can do more drugs, so I can work more..."
2018-03-11 11:15:42 +00:00
mantra turned to become
"I work more, so I can add more configuration, so I can work more..."
2018-03-11 11:15:42 +00:00
2018-11-02 21:26:53 +00:00
Dont know about you, but tinkering around with configurations all day, and watching build processes move ever **S L O W E R** is not what I signed up for.
So...
2018-03-11 11:15:42 +00:00
2018-11-02 21:26:53 +00:00
**PULL THE ROTTING PLUG!**
2018-03-11 11:15:42 +00:00
Stop getting distracted by the *shiny* future that *may* never come, and focus on the here and now. **Here** and **now** is pretty awesome. We have native ES6 language support in all evergreen browsers.
2018-03-11 11:15:42 +00:00
No webpack.
No configuration.
2018-11-02 21:26:53 +00:00
No BS.
2018-03-11 11:15:42 +00:00
2018-11-02 21:26:53 +00:00
Write the code you love, and free yourself from the **headaches you dont need.**
2018-03-11 11:15:42 +00:00
### How Does it work
Everything starts with your `index.html` page, or what ever html page your building, and you turn your `script` includes from this
2018-03-11 11:15:42 +00:00
<script src="mycode.js"></script>
2018-03-11 11:15:42 +00:00
into this
2018-03-11 11:15:42 +00:00
<script type="module" src="mycode.js"></script>
2018-03-11 11:15:42 +00:00
and those lazy import statements you have that dont include the extension
2018-03-11 11:15:42 +00:00
import Code from './src/Code';
2018-03-11 11:15:42 +00:00
should have the extension
2018-03-11 11:15:42 +00:00
import Code from './src/Code.js';
2018-11-02 21:26:53 +00:00
and everything is right with the world and we can find peace and happiness for all developers.
2018-03-11 11:15:42 +00:00
2018-11-02 21:26:53 +00:00
So...
**WEBPACK BEGONE! ES6 IS HERE**
But I hear you screaming at the screen, **what about minification**, and ES5 support, and...
I know [WebPack]() has its uses, or rather a build process has its uses, but a lot of that can be done much simpler...simpler for any developer to understand -- like [Gulp](). A few *gulp* scripts could solve your problem, and you can break-up to operations, combine and mix and match as is important to each developer.
My biggest advocate for having a build process is for the final build, aka **PRODUCTION**, but code-by-the-hour should just work -- everywhere, as the web was designed.
**Rant Over.**