@sewing-kit/plugin-webpack
Notes from porting sewing-kit
-
cache
is set totrue
in development. Per webpack docs,true
is an alias for{type: 'memory'}
, which is the default. So, removed. -
mode
is inferred fromenv
. In new sewing-kit, this is explicitly set by each hook that creates a config. -
target
is computed fromenv
. Moved to plugin-webpack for the default configuration creator, removed service-worker as that would be up to the plugin building a service worker, which is out of scope for the core plugin. -
node
is set for the server. Added to the default config creator in plugin-webpack. -
performance
gets hints turned off. TODO: move to Shopify or Quilt config, maybe not a good default choice. -
entries
uses the default paths.sourceRoot, except in some special cases. TODO: move the gem-related and source-map-support special casing to Quilt. Default entry moved to default config creator in plugin-webpack. -
output.path
uses the default build path. Moved to base config creator, but smartly picks a subdirectory for multi-project workspaces -
output.devtool...
sets some debug options based onvscodeDebug
. Moved toplugin-vscode
and dependent on a genericdebug
flag for the build/ dev -
output.publicPath
is inferred from lots of workspace stuff. TODO: move to Shopify plugin -
output.filename
is prefixed with the browser target, and computed from production assets.latest
/baseline
prefixing done byplugin-differential-serving
, set the correct filename based onmode === production
in the default config creator. -
output.globalObject
isself
for browser targets, andglobal
otherwise. Done in the default config creator, inferring the correct object from the runtime of a package (and otherwise using the same logic as old SK, but without the dedicated support for service workers). -
output.chunkFilename
is prefixed with the browser target. This is done through a hook inplugin-differential-serving
. -
output.crossOriginLoading
is set toanonymous
in dev. According to this PR, this helps improve stack traces for errors thrown in async chunks. Made part of the default config creator. TODO: check why only in dev. -
output.hash...
gets some good SRI defaults. Added to the default config creator. -
externals
is set towebpack-node-externals
on the server with a handpicked allow list. Gord and I have discussed in the past how this is probably not the right default for node: inlining is likely valuable on the server as the default. There is awebpackExternals
hook + plugin creator that can easily accept an array of strings/ regexes for conditional externalizing, which I think is a good tool for things like lambda that may externalize code put into layers. -
devtools
is inferred from server/ client/ dev/ prod/ an option on the "style" to use. Recreated the server/client/ dev/ prod behavior, but TODO a decision on package sourcemaps, investigate whether we actually have the right defaults, and see if we want an option on the default webpack config creator to choose fast/ accurate sourcemaps. -
optimization
gets inferred for production client/ server/ service-worker. Moved most of this logic to the core config creator, gated on production and the target being node/ web. Added hooks for easy access to a few optimization settings, including minimizers. Moved CSS minimizer to plugin-css. TODO need to get the service worker stuff redone eventually, also want to do a once-over to make sure all the default settings make sense for the basic combinations. -
performance
turns off hints. Replicated in current config but TODO should decide on a better default (mostly looking at the other metaframeworks I guess). -
plugins.reactServer
adds the@shopify/react-server
stuff. TODO createquilt-next
’s equivalent (it basically becreateComposedBuildPlugin([webpackCustomEntry((entry) => 'import App from ${JSON.stringify(entry)}; ...')])
) -
plugins.report
adds theBundleAnalyzerReport
plugin. TODO move this to Shopify/ shrink-ray plugin, will also need to account for its weird build behavior (I think current sk waits for a log to happen to indicate it finished :horror:) -
plugins.styles
adds theMiniExtractPlugin
and avoids some weird CSS warnings. Moved toplugin-css
. -
plugins.typeCheck
conditionally includes our plugin to ignore the annoying "missing export" warning for types. Moved toplugin-typescript
, referencing an in-package webpack plugin that is like ours but that also handles child compilations. Applied it universally because I did not port the "type check during build" functionality. -
plugins.watch
adds theIgnorePlugin
for.d.ts
files. Moved toplugin-typescript
. -
plugins.manifests
adds our asset manifest plugin. TODO need to figure out where this belongs — is it the right default? Is it aquilt
choice? Is it a Shopify choice? -
plugins.buildIntegrity
includes our SRI and content hash verification plugins. TODO need to include in the defaults but want them hosted in this repo -
plugins.output
includes theNoEmitOnErrorsPlugin
. I made the default configoptimization.noEmitOnErrors = true
instead. TODO see if there is a reason production should output errored assets -
plugins.output
limits the max chunks to 1 for dev server. Moved to default config creator but TODO why only in dev? -
plugins.output
adds the hash and no-unexpected-tree-shaking plugins for production clients. Added the hash plugin to the default config creator, want to add the no-unexpected-tree-shaking plugin too but TODO want it hosted in the repo -
plugins.output
adds the compression plugin for Rails. TODO add to a Shopify/ Rails plugin -
plugins.input
adds the case sensitive file paths plugin. Added to the default Webpack config because it's fine. -
plugins.define
adds theDefinePlugin
, moved to beoptimization.nodeEnv = mode
instead -
plugins.lodash
does some stuff to optimize lodash. TODO put in its own plugin -
plugins.chunkNaming
adds a custom naming strategy. TODO decide whether this is just a better default, or whether should be in the Quilt plugin, or whether we can do some other better magical naming of things -
plugins.graphql
adds the persisted GraphQL plugin. TODO move to a dedicated sk plugin -
plugins.workers
adds the@shopify/web-worker
’s plugin. Moved toquilt-next
’s sk plugin -
resolve.modules
adds the packages and app directories.packages
is implemented as aliases for the in-repo packages that exist. TODO make the right aliases in place of theapp
"root import" as part of quilt's opinions on project structure. -
resolve.extensions
adds all the supported extensions. Added through plugins using thewebpackExtensions
hook. -
resolve.mainFields
addsjsnext:main
to the defaults (defaults). Added to default config, but mademodule
preferred, and TODO determine if we actually want that in the default -
resolve.alias
has the custom alias for service worker stuff, TODO move to a service worker plugin -
resolve.alias
has a Polaris alias. Implemented as a generic tool throughplugin-package-esnext
. -
resolve.alias
has aliases for Preact. Moved toplugin-react
as an option. -
resolve.alias
has aliases for polyfills, TODO move to quilt plugin -
resolveLoader
has some custom config for E2E and to support nested installs (I think). Not adding. -
plugins.sass
sets up the Sass + CSS + PostCSS config. Logic split between plugin-css and plugin-sass. TODO need to move the shopify config overrides into a Shopify plugin/ the quilt plugin. Also opted not to port the sass resource loader, not sure if it's still needed. Custom plugin needed for configurations using their own postcss plugins to include it in the webpack cache dependencies (postcssPlugins()
). -
plugins
adds lots of JS and TS rules for different environments. Moved everything to use Babel always, and plugin-javascript has a utility to create the Babel rule (uses some hooks added by the babel preset) -
rules.graphql
includes graphql-mini-transforms and cache-loader. Moved toplugin-graphql
. -
rules
includes rules for static files. TODO not implemented yet -
rules
has tons of checks to create the right Babel config. This is now split between many different plugins usingplugin-babel
’s hooks (some need to be moved to Quilt plugin) -
rules.focus
does the magic "focus on one section" behavior. TODO need to figure out where this fits -
rules.withoutX
cover importing file types without the matching dependencies. Not really in the model of new SK, so not implemented.