Feature/webpack docs #22
Conversation
particle/webpack.md
Outdated
| @@ -1,7 +1,33 @@ | |||
| # Webpack | |||
|
|
|||
| [Webpack](https://webpack.js.org/) is a bundling tool to handle the various assets of the project in a build step. It accepts one or more entry points and then tracks their various dependencies recursively to assemble the dependency graph. This dependency chain allows us to readily include files to be emitted to the built assets of the project. The Webpack configuration in Particle has been set up to handle commonly used file types such as: Twig, Sass, JavaScript, TypeScript, SVGs, image assets, and more. | |||
There was a problem hiding this comment.
Consider linking to official docs when using webpack jargon. E.g, entry points could be pointed to: https://webpack.js.org/concepts/entry-points/
particle/webpack.md
Outdated
|
|
||
| Particle utilizes a multi-level inheritance model for it's various configurations. This allows the configuration to be extensible across multiple applications as well as multiple design systems. Configuration objects are merged together from generic to most specific. | ||
|
|
||
| **Root webpack config**: The root `webpack.config.js` file contains the base configuration and loaders that most applications and design systems share. This includes loaders for: Vue, Sass/CSS, image and other file assets, JavaScript, TypeScript, and Twig. Stylesheets also are passed through PostCSS which uses the `.browserslistrc` file to autoprefix CSS attributes as well as minify CSS in production. This is the base configuration that all other configurations extend from. |
There was a problem hiding this comment.
|
|
||
| ## Bundle Warnings during build | ||
|
|
||
| The default Particle install will emit Webpack warnings when running the `build:pl` script. These warnings are: `WARNING in asset size limit`, and `WARNING in entrypoint size limit`. The asset size limit is a result of the Font Awesome SVG map. This raw asset is tree-shaken during the build process to only utilize the icons used and referenced in the code base. The entrypoint size limit is a result of the decision to bundle everything into one entrypoint for initial install and ease of use. This can be optimized through creating multiple entry points, or code-splitting the bundle as described in the section below. Additionally, if you don't need libraries such as Vue for your application, the bundle size can be reduced by removing Vue examples from the dependency chain. These examples are located at `source/default/_patterns/02-molecules/vue-widget/`. |
There was a problem hiding this comment.
Not necessarily a part of this PR, but I think this is a good reason to pull Vue/TypeScript off of the Carousel example. We get a lot of basic Drupal usage out of the Carousel example, and advocating it be removed in Sprint 0 causes additional questions.
tl;dr: I've answered quite a few usage questions in the past month that could be solved by making Carousel a good Drupal usage example.
There was a problem hiding this comment.
Originally the Carousel was suggested by @illepic to be converted over due to the settings object being a good opportunity to show the interface. I'm not opposed to converting it back as part of the PR either as we definitely don't want to make the example usage get in the way.
There was a problem hiding this comment.
For sure! I thought about not saying anything. But imo, it probably would be better to make a decision about our demo components. I think we should use each individually to demonstrate a given concept. That way, when there's a question, we can succinctly say, "check this out here."
Carousel is a perfect example to demonstrate how to pass settings to Drupal.
Update Webpack documentation per #19