How to add plugin for ts-loader?

[jurijsk]

I'm trying to typescript-plugin-styled-components to add plugin to ts-loaded webpack config meaning that I need to add function to webpack's module.rules[index_of_ts_oader].options which I can do using tsOverlay and loaderOptions but at the end I endup with 2 ts-loaders in the config because webpackMerge won't merge rules correctly.

Looking at webpack-merge docs I think there is a way to do merging taking into account webpack specifics, but I'm not sure if I'm using any of tooling correctly. Documentation on just is not particularly helpful, I can not understand any of it without debugging webpack.config itself. Examples are much needed.

[kenotron]

I think what you want is something to do with tsOverlay: https://github.com/microsoft/just/blob/master/packages/just-scripts/src/webpack/overlays/tsOverlay.ts

so you would overlay your webpack config with a call to:

tsOverlay({
  loaderOptions: {
     getCustomTransformers: () => ({ before: [styledComponentsTransformer] })
  }
})

I've never used custom transformers, but this will land in the ts-loader config like the doc

[kenotron]

One more note - if you're piecing together a webpack config, you can take this as a reference:

https://github.com/microsoft/just/blob/master/packages/just-scripts/src/webpack/webpack.config.ts

export const basicWebpackConfig: any = {
  entry: './src/index',
  mode: 'production',
  output: {
    path: path.join(process.cwd(), 'dist'),
    filename: 'bundle.js'
  }
};

export const webpackConfig: any = merge(basicWebpackConfig, stylesOverlay(), tsOverlay(), fileOverlay(), displayBailoutOverlay());

[jurijsk]

@kenotron Thnks for you reply. I guess my concern is that I got the vibe from doc that you override something you just need to use tsOverlay like this:

const { webpackMerge, htmlOverlay, webpackServeConfig, *tsOverlay* } = require('just-scripts'); module.exports = webpackMerge(webpackServeConfig, htmlOverlay, *tsOverlay({...})*); but in fact it sill mess up the config and you will end up with 2 ts-loader's, because you already get one for free with webpackServeConfig`. I'm not sure how bad is that. All I'm saying, docs need some exaamples.

[kenotron]

Needs more docs - yup!

[github-actions[bot]]

Issues seem to have gone stale.

[jurijsk]

amazing.