# `@sewing-kit/plugin-webpack`

## Notes from porting sewing-kit

- [`cache` is set to `true` in development](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/index.ts#L82). Per [webpack docs](https://webpack.js.org/configuration/other-options/#cache), `true` is an alias for `{type: 'memory'}`, which is the default. So, removed.
- [`mode` is inferred from `env`](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/index.ts#L83). In new sewing-kit, this is explicitly set by each hook that creates a config.
- [`target` is computed from `env`](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/index.ts#L84-L88). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/index.ts#L89-L95). Added to the default config creator in plugin-webpack.
- [`performance` gets hints turned off](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/index.ts#L108). TODO: move to Shopify or Quilt config, maybe not a good default choice.
- [`entries` uses the default paths.sourceRoot](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/entry.ts#L13), except in some special cases. TODO: move the [gem-related](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/entry.ts#L20-L22) and [source-map-support](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/entry.ts#L13) special casing to Quilt. Default entry moved to default config creator in plugin-webpack.
- [`output.path` uses the default build path](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/output.ts#L27). Moved to base config creator, but smartly picks a subdirectory for multi-project workspaces
- [`output.devtool...` sets some debug options based on `vscodeDebug`](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/output.ts#L13-L19). Moved to `plugin-vscode` and dependent on a generic `debug` flag for the build/ dev
- [`output.publicPath` is inferred from lots of workspace stuff](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/output.ts#L28). TODO: move to Shopify plugin
- [`output.filename` is prefixed with the browser target, and computed from production assets](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/output.ts#L29-L33). `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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/output.ts#L34). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/output.ts#L34). This is done through a hook in `plugin-differential-serving`.
- [`output.crossOriginLoading` is set to `anonymous` in dev](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/output.ts#L36). According to [this PR](https://github.com/Shopify/sewing-kit/commit/505da21e90d72355d0aadbef9ccafe3959454710), 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/output.ts#L38-L39). Added to the default config creator.
- [`externals` is set to `webpack-node-externals` on the server with a handpicked allow list](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/externals.ts). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/devtool.ts). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/optimization.ts). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/index.ts#L108). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L31-L36). TODO create `quilt-next`’s equivalent (it basically be `createComposedBuildPlugin([webpackCustomEntry((entry) => 'import App from ${JSON.stringify(entry)}; ...')])`)
- [`plugins.report` adds the `BundleAnalyzerReport` plugin](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L38-L51). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L53-L71). Moved to `plugin-css`.
- [`plugins.typeCheck` conditionally includes our plugin to ignore the annoying "missing export" warning for types](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L73-L86). Moved to `plugin-typescript`, referencing an in-package webpack plugin that is like [ours](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/webpack-ignore-typescript-export-warnings-plugin/src/index.ts) 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L88-L90). Moved to `plugin-typescript`.
- [`plugins.manifests` adds our asset manifest plugin](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L92-L132). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L134-L150). TODO need to include in the defaults but want them hosted in this repo
- [`plugins.output` includes the `NoEmitOnErrorsPlugin`](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L155). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L156-L159). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L160-L163). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L169-L171). TODO add to a Shopify/ Rails plugin
- [`plugins.input` adds the case sensitive file paths plugin](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L176-L178). Added to the default Webpack config because it's fine.
- [`plugins.define` adds the `DefinePlugin`](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L180-L185), moved to be [`optimization.nodeEnv = mode`](https://webpack.js.org/configuration/optimization/#optimizationnodeenv) instead
- [`plugins.lodash` does some stuff to optimize lodash](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L187-L206). TODO put in its own plugin
- [`plugins.chunkNaming` adds a custom naming strategy](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L208-L232). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L234-L240). TODO move to a dedicated sk plugin
- [`plugins.workers` adds the `@shopify/web-worker`’s plugin](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/plugins.ts#L242-L253). Moved to `quilt-next`’s sk plugin
- [`resolve.modules` adds the packages and app directories](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/resolve.ts#L21). `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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/resolve.ts#L22-L30). Added through plugins using the `webpackExtensions` hook.
- [`resolve.mainFields` adds `jsnext:main` to the defaults](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/resolve.ts#L31-L35) ([defaults](https://webpack.js.org/configuration/resolve/#resolvemainfields)). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/resolve.ts#L38-L44), TODO move to a service worker plugin
- [`resolve.alias` has a Polaris alias](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/resolve.ts#L45-L50). Implemented as a generic tool through `plugin-package-esnext`.
- [`resolve.alias` has aliases for Preact](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/resolve.ts#L51-L55). Moved to `plugin-react` as an option.
- [`resolve.alias` has aliases for polyfills](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/resolve.ts#L56), TODO move to quilt plugin
- [`resolveLoader` has some custom config for E2E and to support nested installs (I think)](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/index.ts#L153-L159). Not adding.
- [`plugins.sass` sets up the Sass + CSS + PostCSS config](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/rules.ts#L30-L107). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/rules.ts#L324-L518). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/rules.ts#L520-L541). Moved to `plugin-graphql`.
- [`rules` includes rules for static files](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/rules.ts#L109-L214). TODO not implemented yet
- [`rules` has tons of checks to create the right Babel config](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/rules.ts#L216-L322). 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](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/rules.ts#L543-L571). TODO need to figure out where this fits
- [`rules.withoutX` cover importing file types without the matching dependencies](https://github.com/Shopify/sewing-kit/blob/1c5e7acd53786fa7530c60e3d9cdeb39e9433896/packages/sewing-kit/src/tools/webpack/config/rules.ts#L573-L596). Not really in the model of new SK, so not implemented.