webpack build thoughts

[thescientist13]

Introductions 👋

First off, very cool project! I say that with all the envy and respect of someone who wishes they had thought of the idea first 😄

webpack Feedback

I'm still getting more familiar with the build and development workflows for "vanilla JS" projects with webpack in my own side project, but I have a fair amount of webpack experience with frameworks like Angular, React and Vue.

This project (although for React) is probably my "best" public attempt at configuring webpack to date. Hopefully it may provide a useful reference / context for my general thoughts and approach.

In reviewing I came out with a few observations for your consideration:

• My understanding from using webpack is that the goal should be to have all import statements included from some point starting with the entry point as this is how webpack is able to build up the dependency graph to fully optimize a build. Copying the files manually might negate the advantage webpack brings of being able to fully optimize and bundle / code split source files.
  • For example, Angular project's have a vendor.js file that gets an import in index.js
  • I am also planning to evaluate the viability of using babel-preset-env for polyfills as well
• A recommended best practice by webpack is to split configuration into common, develop and production files. This helps reduce the need for conditional logic within configurations and makes for a nice separation between what are generally two goals; developing and building for production, but with overlap in basic source code pre-processing.
• webpack also has a "mode" API to configure it for the right settings (which can be set per configuration file) like for uglification, source maps, etc

Misc Feedback

• IMO using express may a bit overkill for a simple local web server. Something like http-server or local-web-server would work well for serving a production SPA build and would require less configuration / setup / dependencies.
• This is an article I wrote on my upgrade to webpack v4, which may provide other helpful information

Happy to make a PR if you're onboard with these changes! ✌️

[thepassle]

Hi Owen!

Thanks for your feedback/additional links, very interesting stuff. Im interested in your thoughts about the webpack stuff, i'd happily take a look at a PR if you think it can be improved. (Especially interested in the viability of babel-preset-env)

As for using express, it is a little overkill for what it's doing atm, but the point is to allow people to start quickly extending on this starter kit, and while I'd like to minimize some dependencies, the goal is not to have no dependencies at all. Also I feel like express is commonly recognized enough to warrant including it.

[aadamsx]

As for using express, it is a little overkill for what it's doing atm, but the point is to allow people to start quickly extending on this starter kit

I agree with this 100%. I really liked the fact that it had Express "built in", even with the extra config.

[thescientist13]

Thanks for the feedback @thepassle and @aadamsx ! Looking forward to sharing.

[thescientist13]

Hey @thepassle , here's where I've gotten so far in my efforts.

Overview

Here is a branch with my latest WIP of a simple Todo App using LitElement

• Using webpack + Browserslist + Babel and PostCSS + preset-env to transpile only the code that is needed based on a CanIUse query
• Works in IE11!
• Still need to look into an issue with Chrome having an error when using lit-element and transpiled ES5. Something to do with this and properties I think.
• Still need to test Edge
• Pulling in polyfills using CDN (still considering CopyWebpackPlugin though, or maybe polyfill.io)

Here is some documentation I've written that can provide some more info. Basically without targetting IE11, there are no issues. Not sure what kind of browser support you had in mind.

tl;dr

browserslist

> 1%
not op_mini all

babel

module.exports = {
  presets: ['@babel/preset-env'],

  plugins: [
    ['babel-plugin-transform-builtin-classes', {
      globals: ['LitElement']
    }]
  ]
};

PostCSS

module.exports = {
  plugins: {
    'postcss-cssnext': {},
    'cssnano': {}
  }
};

Polyfills

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/custom-elements-es5-adapter.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>

Once i get all the browsers working, I would look to apply similar changes here.

Looking forward to your thoughts!

[thepassle]

Hey owen! Finally have some time to really dive into this. The setup/config you have looks great, very clean. Im really looking to get rid of some dependencies and overall trying to have the build configuration much more clean, with as little means as necessary.

My main concern is browser support, as of now CLA supports at least the latest 2 versions of all major browsers, though I think we should be able to get that up and running as well. I'll have more time to work on it this friday, i expect i'll have some more info by then.

[thepassle]

Fixed in d86159d3d360cfc62746b3459e230f6f7358b544

Thanks for the feedback! :)