Skip to content

Commit

Permalink
feat(webpack): add plugin to automatically configure build and serve …
Browse files Browse the repository at this point in the history
…targets for projects
  • Loading branch information
jaysoo committed Nov 24, 2023
1 parent db0f65e commit 51659b3
Show file tree
Hide file tree
Showing 62 changed files with 1,660 additions and 644 deletions.
80 changes: 26 additions & 54 deletions docs/generated/packages/webpack/executors/webpack.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,7 @@
"compiler": {
"type": "string",
"description": "The compiler to use.",
"enum": ["babel", "swc", "tsc"],
"default": "babel"
"enum": ["babel", "swc", "tsc"]
},
"outputPath": {
"type": "string",
Expand All @@ -43,8 +42,7 @@
"type": "string",
"alias": "platform",
"description": "Target platform for the build, same as the Webpack target option.",
"enum": ["node", "web", "webworker"],
"default": "web"
"enum": ["node", "web", "webworker"]
},
"deleteOutputPath": {
"type": "boolean",
Expand All @@ -53,8 +51,7 @@
},
"watch": {
"type": "boolean",
"description": "Enable re-building when files change.",
"default": false
"description": "Enable re-building when files change."
},
"baseHref": {
"type": "string",
Expand All @@ -66,33 +63,27 @@
},
"vendorChunk": {
"type": "boolean",
"description": "Use a separate bundle containing only vendor libraries.",
"default": true
"description": "Use a separate bundle containing only vendor libraries."
},
"commonChunk": {
"type": "boolean",
"description": "Use a separate bundle containing code used across multiple bundles.",
"default": true
"description": "Use a separate bundle containing code used across multiple bundles."
},
"runtimeChunk": {
"type": "boolean",
"description": "Use a separate bundle containing the runtime.",
"default": true
"description": "Use a separate bundle containing the runtime."
},
"sourceMap": {
"description": "Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.",
"default": true,
"oneOf": [{ "type": "boolean" }, { "type": "string" }]
},
"progress": {
"type": "boolean",
"description": "Log progress to the console while building.",
"default": false
"description": "Log progress to the console while building."
},
"assets": {
"type": "array",
"description": "List of static application assets.",
"default": [],
"items": {
"oneOf": [
{
Expand Down Expand Up @@ -163,8 +154,7 @@
"x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
}
]
},
"default": []
}
},
"styles": {
"type": "array",
Expand Down Expand Up @@ -200,18 +190,15 @@
"x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
}
]
},
"default": []
}
},
"namedChunks": {
"type": "boolean",
"description": "Names the produced bundles according to their entry file.",
"default": true
"description": "Names the produced bundles according to their entry file."
},
"outputHashing": {
"type": "string",
"description": "Define the output filename cache-busting hashing mode.",
"default": "none",
"enum": ["none", "all", "media", "bundles"]
},
"stylePreprocessorOptions": {
Expand All @@ -221,8 +208,7 @@
"includePaths": {
"description": "Paths to include. Paths will be resolved to project root.",
"type": "array",
"items": { "type": "string" },
"default": []
"items": { "type": "string" }
}
},
"additionalProperties": false
Expand Down Expand Up @@ -251,13 +237,11 @@
},
"generatePackageJson": {
"type": "boolean",
"description": "Generates a `package.json` and pruned lock file with the project's `node_module` dependencies populated for installing in a container. If a `package.json` exists in the project's directory, it will be reused with dependencies populated.",
"default": false
"description": "Generates a `package.json` and pruned lock file with the project's `node_module` dependencies populated for installing in a container. If a `package.json` exists in the project's directory, it will be reused with dependencies populated."
},
"transformers": {
"type": "array",
"description": "List of TypeScript Compiler Transfomers Plugins.",
"default": [],
"aliases": ["tsPlugins"],
"items": {
"oneOf": [
Expand Down Expand Up @@ -302,49 +286,40 @@
{ "type": "string", "enum": ["none", "all"] },
{ "type": "array", "items": { "type": "string" } }
],
"description": "Dependencies to keep external to the bundle. (`all` (default), `none`, or an array of module names)",
"default": "all"
"description": "Dependencies to keep external to the bundle. (`all` (default), `none`, or an array of module names)"
},
"extractCss": {
"type": "boolean",
"description": "Extract CSS into a `.css` file.",
"default": true
"description": "Extract CSS into a `.css` file."
},
"subresourceIntegrity": {
"type": "boolean",
"description": "Enables the use of subresource integrity validation.",
"default": false
"description": "Enables the use of subresource integrity validation."
},
"polyfills": {
"type": "string",
"description": "Polyfills to load before application",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.js|.ts|.tsx)"
},
"verbose": {
"type": "boolean",
"description": "Emits verbose output",
"default": false
},
"verbose": { "type": "boolean", "description": "Emits verbose output" },
"statsJson": {
"type": "boolean",
"description": "Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`.",
"default": false
"description": "Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`."
},
"isolatedConfig": {
"type": "boolean",
"description": "Do not apply Nx webpack plugins automatically. Plugins need to be applied in the project's webpack.config.js file (e.g. withNx, withReact, etc.).",
"default": true
"default": true,
"x-deprecated": "Automatic configuration of Webpack is deprecated in favor of an explicit 'webpack.config.js' file. This option will be removed in Nx 18. See https://nx.dev/recipes/webpack/webpack-config-setup."
},
"extractLicenses": {
"type": "boolean",
"description": "Extract all licenses in a separate file, in the case of production builds only.",
"default": false
"description": "Extract all licenses in a separate file, in the case of production builds only."
},
"memoryLimit": {
"type": "number",
"description": "Memory limit for type checking service process in `MB`.",
"default": 2048
"description": "Memory limit for type checking service process in `MB`."
},
"fileReplacements": {
"description": "Replace files with other files in the build.",
Expand All @@ -365,18 +340,16 @@
},
"additionalProperties": false,
"required": ["replace", "with"]
},
"default": []
}
},
"buildLibsFromSource": {
"type": "boolean",
"description": "Read buildable libraries from source instead of building them separately.",
"description": "Read buildable libraries from source instead of building them separately. If set to `false`, the `tsConfig` option must also be set to remap paths.",
"default": true
},
"generateIndexHtml": {
"type": "boolean",
"description": "Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin`.",
"default": true
"description": "Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin`."
},
"postcssConfig": {
"type": "string",
Expand All @@ -391,16 +364,15 @@
},
"babelUpwardRootMode": {
"type": "boolean",
"description": "Whether to set rootmode to upward. See https://babeljs.io/docs/en/options#rootmode",
"default": false
"description": "Whether to set rootmode to upward. See https://babeljs.io/docs/en/options#rootmode"
},
"babelConfig": {
"type": "string",
"description": "Path to the babel configuration file of your project. If not provided, Nx will default to the .babelrc file at the root of your project. See https://babeljs.io/docs/en/config-files",
"x-completion-type": "file"
}
},
"required": ["tsConfig", "main"],
"required": [],
"definitions": {
"assetPattern": {
"oneOf": [
Expand Down
34 changes: 34 additions & 0 deletions e2e/webpack/src/webpack.pcv3.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {
cleanupProject,
newProject,
runCLI,
runE2ETests,
uniq,
} from '@nx/e2e/utils';

describe('Webpack Plugin (PCv3)', () => {
let originalPcv3: string | undefined;
beforeAll(() => {
originalPcv3 = process.env.NX_PCV3;
process.env.NX_PCV3 = 'true';
newProject();
});

afterAll(() => {
process.env.NX_PCV3 = originalPcv3;
cleanupProject();
});

it('should generate, build, and serve React applications', () => {
const appName = uniq('app');
runCLI(
`generate @nx/react:app ${appName} --bundler webpack --e2eTestRunner=cypress --no-interactive`
);

expect(() => runCLI(`build ${appName}`)).not.toThrow();

if (runE2ETests()) {
runCLI(`e2e ${appName}-e2e --watch=false --verbose`);
}
}, 500_000);
});
10 changes: 8 additions & 2 deletions e2e/webpack/src/webpack.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -125,12 +125,18 @@ module.exports = composePlugins(withNx(), (config) => {
path: path.join(__dirname, '../../dist/${appName}')
},
plugins: [
new NxWebpackPlugin()
new NxWebpackPlugin({
compiler: 'tsc',
main: 'apps/${appName}/src/main.ts',
tsConfig: 'apps/${appName}/tsconfig.app.json',
outputHashing: 'none',
optimization: false,
})
]
};`
);

runCLI(`build ${appName} --outputHashing none`);
runCLI(`build ${appName}`);

let output = runCommand(`node dist/${appName}/main.js`);
expect(output).toMatch(/Hello/);
Expand Down
7 changes: 4 additions & 3 deletions packages/next/plugins/component-testing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -112,12 +112,13 @@ Able to find CT project, ${!!ctProjectConfig}.`);
),
};
const configure = composePluginsSync(
withNx(),
withReact({
withNx({
target: 'web',
styles: [],
scripts: [],
postcssConfig: ctProjectConfig.root,
})
}),
withReact({})
);
const webpackConfig = configure(
{},
Expand Down
2 changes: 1 addition & 1 deletion packages/node/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
"error",
{
"buildTargets": ["build-base"],
"ignoredDependencies": ["nx", "typescript"]
"ignoredDependencies": ["nx", "typescript", "@nx/webpack"]
}
]
}
Expand Down
40 changes: 40 additions & 0 deletions packages/node/src/generators/application/application.pcv3.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import {
readNxJson,
readProjectConfiguration,
Tree,
updateNxJson,
} from '@nx/devkit';
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';

// nx-ignore-next-line
import { applicationGenerator } from './application';

describe('node app generator (PCv3)', () => {
let tree: Tree;

beforeEach(() => {
tree = createTreeWithEmptyWorkspace();
const nxJson = readNxJson(tree);
nxJson.plugins ??= [];
nxJson.plugins.push('@nx/webpack/plugin');
updateNxJson(tree, nxJson);
});

it('should skip the build target and setup webpack config', async () => {
await applicationGenerator(tree, {
name: 'my-node-app',
bundler: 'webpack',
projectNameAndRootFormat: 'as-provided',
});
const project = readProjectConfiguration(tree, 'my-node-app');
expect(project.root).toEqual('my-node-app');
expect(project.targets.build).toBeUndefined();

const webpackConfig = tree.read('my-node-app/webpack.config.js', 'utf-8');
expect(webpackConfig).toContain(`new NxWebpackPlugin`);
expect(webpackConfig).toContain(`target: 'node'`);
expect(webpackConfig).toContain(`'../dist/my-node-app'`);
expect(webpackConfig).toContain(`main: './src/main.ts'`);
expect(webpackConfig).toContain(`tsConfig: './tsconfig.app.json'`);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ describe('app', () => {
outputPath: 'dist/my-node-app',
main: 'my-node-app/src/main.ts',
tsConfig: 'my-node-app/tsconfig.app.json',
isolatedConfig: true,
webpackConfig: 'my-node-app/webpack.config.js',
assets: ['my-node-app/src/assets'],
},
Expand Down
Loading

0 comments on commit 51659b3

Please sign in to comment.