@sewing-kit/plugin-webpack

Notes from porting sewing-kit

• cache is set to true in development. Per webpack docs, true is an alias for {type: 'memory'}, which is the default. So, removed.
• mode is inferred from env. In new sewing-kit, this is explicitly set by each hook that creates a config.
• target is computed from env. 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 on vscodeDebug. Moved to plugin-vscode and dependent on a generic debug 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 by plugin-differential-serving, set the correct filename based on mode === production in the default config creator.
• output.globalObject is self for browser targets, and global 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 in plugin-differential-serving.
• output.crossOriginLoading is set to anonymous 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 to webpack-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 a webpackExternals 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 create quilt-next’s equivalent (it basically be createComposedBuildPlugin([webpackCustomEntry((entry) => 'import App from ${JSON.stringify(entry)}; ...')]))
• plugins.report adds the BundleAnalyzerReport 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 the MiniExtractPlugin and avoids some weird CSS warnings. Moved to plugin-css.
• plugins.typeCheck conditionally includes our plugin to ignore the annoying "missing export" warning for types. Moved to plugin-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 the IgnorePlugin for .d.ts files. Moved to plugin-typescript.
• plugins.manifests adds our asset manifest plugin. TODO need to figure out where this belongs — is it the right default? Is it a quilt 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 the NoEmitOnErrorsPlugin. I made the default config optimization.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 the DefinePlugin, moved to be optimization.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 to quilt-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 the app "root import" as part of quilt's opinions on project structure.
• resolve.extensions adds all the supported extensions. Added through plugins using the webpackExtensions hook.
• resolve.mainFields adds jsnext:main to the defaults (defaults). Added to default config, but made module 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 through plugin-package-esnext.
• resolve.alias has aliases for Preact. Moved to plugin-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 to plugin-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 using plugin-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.