-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Expose resolved webpack config for external tool #4286
Comments
This issue appear to be semi hackable by making use of nuxt hook and its api. Let say we are making a build for SSR that will output webpack config for both client and server, this could be done. HowWrite a script to collect the compiler options via the FILE: import { Nuxt, Builder } from 'nuxt';
import config from '../nuxt.config.js';
const stopProcessIfCalledTimes = (times, callback) => {
let counter = times;
const compilerOptionMap = {};
return ({ name, compiler }) => {
compilerOptionMap[name] = compiler;
counter--;
if (counter === 0) {
callback(compilerOptionMap);
}
};
};
export default function collectWebpackConfigs() {
return new Promise((resolve) => {
const nuxt = new Nuxt(config)
let stopProcessWhenDone = stopProcessIfCalledTimes(1, resolve);
nuxt.hook('build:before', (nuxt, buildOptions) => {
if (buildOptions.ssr) {
stopProcessWhenDone = stopProcessIfCalledTimes(2, resolve)
}
});
nuxt.hook('build:compile', ({name, compiler}) => {
stopProcessWhenDone({ name, compiler })
});
if (nuxt.options.dev) {
new Builder(nuxt).build()
}
});
}; A parent script will execute this function and write the webpack config to a file so that we can use it later. After the writing is done. It will stop the process. FILE: import fs from 'fs';
import path from 'path';
import collectWebpackConfigs from './collect-webpack-configs';
const makeWebpackConfigName = postFix => path.join(__dirname, 'webpack.config.' + postFix + '.js');
const outputConfigurationAsFile = ({ name, options }) => {
const webpackFilePath = makeWebpackConfigName(name);
const content = 'module.exports = ' + JSON.stringify(options);
fs.writeFileSync(webpackFilePath, content);
};
const processWebpackCompilerMap = (webpackCompilerMap) => {
Object.entries(webpackCompilerMap)
.forEach(([name, compiler]) => {
outputConfigurationAsFile({ name, options: compiler.options });
});
};
collectWebpackConfigs()
.then(processWebpackCompilerMap)
.then(() => process.exit()); This hack require the use of UsageThis hack could enable us to extract webpack config for external tool. node -r esm scripts\update-webpack-configs.js && yarn test In this case,
|
This is a good news for me, at least now I am able to generate a resolved webpack config. However, perhaps, Nuxt can add some kind of API to just trigger and return the In this case, |
Your hack is amazing @amoshydra kudos! |
After the whole day working with this I still have this problem:
First I've changed the creation of the file to have the webpack config inmenory because sitringifying was not working well for me ( a lot of errors like, plugins[0] has not apply method, etc.) do you have any idea @amoshydra? this is how my
and the file using this is something like:
Update:
I hope this is going to be useful to someone :) |
Has there been any progress on this? I need the config so that I can pass it along to the storybook config |
@tjbenton @CKGrafico I have recently digged into Nuxt's builder's api and realise that, we could also do this programatically by extending Nuxt's This could greatly simplify the implementation detail of FILE: import { Nuxt, Builder } from 'nuxt';
import { BundleBuilder } from '@nuxt/webpack/dist/webpack';
import config from 'arbitary-module/../../nuxt.config.js';
class CustomBundleBuilder extends BundleBuilder {
constructor(context) {
super(context);
this.compilerMap = {};
}
/**
* Skip running compiler and store compiler into compilerMap
* @override
*/
async webpackCompile(compiler) {
this.compilerMap[compiler.name] = compiler;
}
}
export default async () => {
const nuxt = new Nuxt(config);
const customBuilder = new Builder(nuxt, CustomBundleBuilder);
await customBuilder.build();
customBuilder.close(); // EDIT: By default nuxt.options is set for development, need to close builder to stop nuxt from watching for fileChange
return customBuilder.bundleBuilder.compilerMap;
}; |
@amoshydra It should be noted that doing this will rimraf your dist build. I just encountered this and it was pretty confusing to figure out, hopefully this saves other people some time debugging. |
@nickforddesign Good point! Perhaps when doing this, we can change the Example: const nuxt = new Nuxt({
...config,
buildDir: path.resolve(process.cwd(), 'temp/other-destination'),
}); |
Resolved through #7029 |
What problem does this feature solve?
I am trying to add unit test with ava in this project. However, webpack alias is not understood by ava. This problem with ava could be resolved by providing a webpack config.
As of now, we need to create the webpack config by hand and try to match it with what nuxt is using.
If a resolved webpack config is produced and exposed, we could use this config with our testing, linting and other external tools.
Related to:
What does the proposed changes look like?
Perhaps, it could look something similar to vue's cli-service implementation. Where the resolved webpack.config is exposed as a file.
https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config
For testing use case, perhaps:
For linting use case,
nuxt dev
, a new resolved webpack.config can override the existing webpack.configIn summary,
The text was updated successfully, but these errors were encountered: