Nx: [Feature Request]: Adding additional loaders to generated webpack builder config (e.g. graphql loader)

[michelcve]

_Please make sure you have read the submission guidelines before posting an issue_

Expected Behavior

I would like to be able to configure the node webpack builder in order to add additional loaders. Specifically in my case a loader for '.graphql' files (https://github.com/samsarahq/graphql-loader).

Current Behavior

Currently it's not possible to feed additional module rules into the generated webpack config.

[FrozenPandaz]

So if I understand correctly, this is an alternative for writing GraphQL queries in a .graphql file as opposed to writing them in the ts/js file with?
gql`query`

It doesn't seem to be the prescribed way of writing queries in node but I can see the benefits.

[michelcve]

Yes, you are correct. Although to be honest, I don't need that specific case anymore myself, as I moved to type-graphql.

It still might interest others though, to be able to influence the webpack config generation (and specifically the rules and plugins).

[muradm]

As of my experience, this issue is related to the fact that webpack config is JavaScript object which may contain expressions, functions etc. Since we are limited to configure using angular-cli.json it is impossible to reflect webpack's flexibility, plugins, loaders etc. in pure json file. Same problem was related to pure angular-cli setup (where as far as i remember, angular team strictly rejected intervention to webpack config, which was reasonably argued). But for node applications, webpack flexibility is a necessity.

I would suggest to have something like webpack.config.override.js/ts per node-app project. Which is applied on top of webpack configuration generated by @nrwl/builders. That way, in case of no customization required, webpack.config.override.js/ts would be empty or non-existent (better I think), otherwise the resulting default webpack config object would be passed (in some or another way) to webpack.config.override.js/ts. Then complex node-app projects may use external plugins, loaders etc.

For instance, currently there are a number of backend applications that are being built as node-app, and in order to satisfy customization we are using patch-package to tune node_modules/@nrwl/builders/src/node/build/webpack/config.js as we need. For example (simplest):

diff --git a/node_modules/@nrwl/builders/src/node/build/webpack/config.js b/node_modules/@nrwl/builders/src/node/build/webpack/config.js
index 6512807..94daaad 100755
--- a/node_modules/@nrwl/builders/src/node/build/webpack/config.js
+++ b/node_modules/@nrwl/builders/src/node/build/webpack/config.js
@@ -35,6 +35,7 @@ function getWebpackConfig(options) {
         },
         module: {
             rules: [
+                { test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/, parser: { system: true }},
                 {
                     test: /\.ts$/,
                     loader: "ts-loader",
@@ -58,6 +59,9 @@ function getWebpackConfig(options) {
             hints: false
         },
         plugins: [
+            new webpack_1.ContextReplacementPlugin(/(.+)?angular(\\|\/)core(.+)?/, path_1.join(__dirname, 'src'), {}),
+            new webpack_1.ContextReplacementPlugin(/(.+)?express(\\|\/)(.+)?/, path_1.join(__dirname, 'src'), {}),
+            new webpack_1.ContextReplacementPlugin(/(.+)?merge-graphql-schemas(\\|\/)(.+)?/, path_1.join(__dirname, 'src'), {}),
             new ForkTsCheckerWebpackPlugin({
                 tsconfig: options.tsConfig,
                 workers: options.maxWorkers || ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE

[chriswnewman]

Just figured I'd add a potential use case here.

Now that NX has first class react support, I've started trying to move some existing standalone react apps into a workspace. These react apps were created with create-react-app. It's been relatively smooth so far. The only thing that's giving me trouble is importing image assets. https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files

I tested ejecting one of the create-react-app projects and can see that their webpack config uses 'file-loader' in the following config segment:

// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
    loader: require.resolve('file-loader'),
    // Exclude `js` files to keep "css" loader working as it injects
    // its runtime that would otherwise be processed through "file" loader.
    // Also exclude `html` and `json` extensions so they get processed
    // by webpacks internal loaders.
    exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
    options: {
        name: 'static/media/[name].[hash:8].[ext]',
    },
} 
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.

Not a webpack guru or anything, but the comments here are interesting. Would it make sense to have a catch-all loader like this somewhere in the default configs?

[chriswnewman]

Just figured I'd add a potential use case here.

Now that NX has first class react support, I've started trying to move some existing standalone react apps into a workspace. These react apps were created with create-react-app. It's been relatively smooth so far. The only thing that's giving me trouble is importing image assets. https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files

I was able to figure out image loading. It turns out you don't need to follow the CRA documentation for adding images once you switch to NX. I got rid of all the import image from ./image.png statements in code.
Then I placed all images in the assets folder of the app, and updated the image src's with path strings like "assets/image.png"

[vsavkin]

@FrozenPandaz could you comment on this issue?

[Zyzle]

Another use case for this I've come across myself is importing of webassembly .wasm files, without the ability to edit the webpack rules it seems like it's not possible to use these right now?

[FrozenPandaz]

We now have the ability to modify the webpack configuration.

https://connect.nrwl.io/app/cookbook/4CjE7wgoOyYU3ri08GCAr7

You can add your loaders to the config here. Please let me know if that makes sense.

[muradm]

We now have the ability to modify the webpack configuration.

https://connect.nrwl.io/app/cookbook/4CjE7wgoOyYU3ri08GCAr7

You can add your loaders to the config here. Please let me know if that makes sense.

@FrozenPandaz , could you please point to commit or doc where I can look at it? Thx