Add option to modify Vue CLI's webpack configuration about nx-plus HOT 8 CLOSED

@JordyLangen it's seems to be working. I tested renaming app.js to main.js. By default app.js is output for a development build, but as you can see in the image main.js was output. The only change I made on your branch was adding the default value (i.e. vue-nx.config.js) to the browser schema. Then I generated an app named my-app and added a vue-nx.config.js file at the root of the project.

from nx-plus.

What would be the preferred way to implement this?

@ZachJW34 and I are having offline discussions about this. We consider this a high priority issue, so I'll provide more details soon.

from nx-plus.

@DavainWhite The public folder is the Vue CLI equivalent of a static folder, as any files located within are copied (such as a favicon). Is this what you are looking for? If it is not, feel free to create an issue and we can move the conversation there.

from nx-plus.

@BuckyMaler thanks for pushing me into the right direction. I have something working now, going clean that up and refactor it. Should be able to open a PR soon.

from nx-plus.

What would be the preferred way to implement this? I'm using this project in a proof of concept at work, and would need this feature. I'd be willing to contribute.

from nx-plus.

@JordyLangen we've decided this issue should be handled by adding support for configureWebpack. Down the road we'd also like to add support for chainWebpack and vue.config.js, but we think supporting configureWebpack is best for now because it can be delivered the fastest.

It'd be great if you could open a PR for this. Sorry we don't have contributing docs at this time.

From the perspective of a user, the way this should work is a user would add a file to their project that exports an object or function as described in the Vue CLI docs. For example:

module.exports = {
  // webpack mods
};

or

module.exports = config => {
  // webpack mods
  return config;
};

That file would be required inside of a builder, set as an inline option, and handed off to Vue CLI.

To start off, you'd want to add configureWebpack as an option to the browser builder here. It should be of type string. Its value would be the path to the webpack file relative to the workspace. Then inside of the builder you'd add configureWebpack as an inline option here and assign to it the object or function exported from the user's webpack file. You'd then repeat this for the dev server and library builders.

To test your changes manually you can run nx e2e vue-e2e, which will run e2e tests, and then cd into tmp/nx-e2e/proj. The tests may take a while to run, so you may want to add an only to the first test so that only that test runs. I have an open PR to improve the development experience.

Let me know if there's anything else I can do to help.

from nx-plus.

@BuckyMaler

could you guys add a static folder in the next release It's hard to get anything running if I cant even add a favicon or manifest to the site.

from nx-plus.

@BuckyMaler I'm wondering if you could help me out. I have this implementation right here: https://github.com/JordyLangen/nx-plus/tree/feature/62-add-vue-configure-webpack-support

The impl. right now requires you to put place a vue-nx.config.js in the root of the project directory.
This works and the builder resolves this file, and adds the configureWebpack to the inlineOptions.

I added a ProvidePlugin with jQuery for testing purposes, but it does not seem to work, nor do I get any error messages. I logged the inlineOptions after it was built, and could see the correct configureWebpack value was in there. Any ideas?

from nx-plus.