Webpack configurationīefore getting into the cool stuff, there’s some setup required to get Webpack to work with our stack. I recommend reading the Webpack Concepts page in their documentation for a bit more in depth outline of how webpack works from a conceptual level. Define output, where the final bundled assets are exported.Integrate plugins, which customize how each file is compiled and bundled.Specify loaders, which define how to load and transform various files.Define entry points, where Webpack starts.A basic explanation of what it does would be that it takes some files as input, maps out their dependencies, then merges those files into some bundled output.Ī simple outline of how Webpack does this: Webpack defines itself as a “static module bundler for modern JavaScript applications”. Here on out we’ll be going deep in the technical details of setting up a Webpack plugin to drive the build system including lots of code examples and config files! First, a detour to explain what a Webpack plugin is, for the unfamiliar. Evaluating React and rendering to MJML/HTMLĪnd with that, we have enough high level info to get started.This plugin will handle a few different phases of compilation: Most of the work will happen in a custom built Webpack plugin which we call ReactMJMLWebpackPlugin. Webpack will drive compilation and take that React code and data to build the files and we will end up with static HTML and some other necessities like metadata and plaintext versions of the emails. All components will be built on React/MJML with some JSON metadata. ![]() The goal is to end up with a build system that looks something like the image above.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |