miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(webpack): change plugin import paths to speed up config loading (#23021)

Browse Source
This commit is contained in:
Jack Hsu 2024-04-26 10:41:59 -04:00 committed by GitHub
parent 9077ae8abb
commit b8e6ebbf9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 106 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/shared/packages/webpack/webpack-config-setup.md
View File

@ -57,7 +57,7 @@ Currently, Nx module federation requires an enhanced Webpack configuration file
A basic Webpack configuration was introduced in Nx 18, and it looks like this: A basic Webpack configuration was introduced in Nx 18, and it looks like this:
```js {% fileName="apps/demo/webpack.config.js" %} ```js {% fileName="apps/demo/webpack.config.js" %}
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -68,7 +68,7 @@ module.exports = {
port: 4200, port: 4200,
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
main: './src/main.ts', main: './src/main.ts',
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
index: './src/index.html', index: './src/index.html',
@ -132,8 +132,8 @@ React projects use the `@nx/react` package to build their apps. This package pro
{% tab label="Basic Webpack configuration" %} {% tab label="Basic Webpack configuration" %}
```js {% fileName="apps/demo/app/webpack.config.js" %} ```js {% fileName="apps/demo/app/webpack.config.js" %}
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -144,7 +144,7 @@ module.exports = {
port: 4200, port: 4200,
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'swc', compiler: 'swc',
main: './src/main.tsx', main: './src/main.tsx',

6
docs/shared/packages/webpack/webpack-plugins.md
View File

@ -286,7 +286,7 @@ Watch for file changes.
#### Example #### Example
```js ```js
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -297,7 +297,7 @@ module.exports = {
port: 4200, port: 4200,
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
main: './src/main.ts', main: './src/main.ts',
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
index: './src/index.html', index: './src/index.html',
@ -322,7 +322,7 @@ Enables or disables [React SVGR](https://react-svgr.com/). Default is `true`.
#### Example #### Example
```js ```js
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {

4
docs/shared/recipes/ci-deployment.md
View File

@ -42,7 +42,7 @@ The [`NxWebpackPlugin`](/recipes/webpack/webpack-plugins#nxwebpackplugin) plugin
To generate a `package.json` we would declare it in the plugin options. To generate a `package.json` we would declare it in the plugin options.
```js {% fileName="apps/acme/app/webpack.config.js" %} ```js {% fileName="apps/acme/app/webpack.config.js" %}
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -53,7 +53,7 @@ module.exports = {
port: 4200, port: 4200,
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'swc', compiler: 'swc',
main: './src/main.tsx', main: './src/main.tsx',

4
e2e/node/src/node.test.ts
View File

@ -115,7 +115,7 @@ describe('Node Applications', () => {
updateFile( updateFile(
`apps/${nodeapp}/webpack.config.js`, `apps/${nodeapp}/webpack.config.js`,
` `
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -123,7 +123,7 @@ module.exports = {
path: join(__dirname, '../../dist/apps/${nodeapp}'), path: join(__dirname, '../../dist/apps/${nodeapp}'),
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
target: 'node', target: 'node',
compiler: 'tsc', compiler: 'tsc',
main: './src/main.ts', main: './src/main.ts',

2
e2e/webpack/src/webpack.legacy.test.ts
View File

@ -125,7 +125,7 @@ describe('Webpack Plugin (legacy)', () => {
path: join(__dirname, '../dist/app9524918'), path: join(__dirname, '../dist/app9524918'),
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
main: './src/main.ts', main: './src/main.ts',
compiler: 'tsc', compiler: 'tsc',
index: './src/index.html', index: './src/index.html',

12
e2e/webpack/src/webpack.test.ts
View File

@ -33,7 +33,7 @@ describe('Webpack Plugin', () => {
`libs/${myPkg}/webpack.config.js`, `libs/${myPkg}/webpack.config.js`,
` `
const path = require('path'); const path = require('path');
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
class DebugPlugin { class DebugPlugin {
apply(compiler) { apply(compiler) {
@ -47,7 +47,7 @@ describe('Webpack Plugin', () => {
path: path.join(__dirname, '../../dist/libs/${myPkg}') path: path.join(__dirname, '../../dist/libs/${myPkg}')
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
compiler: 'tsc', compiler: 'tsc',
main: './src/index.ts', main: './src/index.ts',
tsConfig: './tsconfig.lib.json', tsConfig: './tsconfig.lib.json',
@ -139,7 +139,7 @@ describe('Webpack Plugin', () => {
`apps/${appName}/webpack.config.js`, `apps/${appName}/webpack.config.js`,
` `
const path = require('path'); const path = require('path');
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
module.exports = { module.exports = {
target: 'node', target: 'node',
@ -147,7 +147,7 @@ describe('Webpack Plugin', () => {
path: path.join(__dirname, '../../dist/${appName}') path: path.join(__dirname, '../../dist/${appName}')
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
compiler: 'tsc', compiler: 'tsc',
main: 'apps/${appName}/src/main.ts', main: 'apps/${appName}/src/main.ts',
tsConfig: 'apps/${appName}/tsconfig.app.json', tsConfig: 'apps/${appName}/tsconfig.app.json',
@ -239,14 +239,14 @@ describe('Webpack Plugin', () => {
updateFile( updateFile(
`apps/${appName}/webpack.config.js`, `apps/${appName}/webpack.config.js`,
` `
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
output: { output: {
path: join(__dirname, '../../dist/apps/demo'), path: join(__dirname, '../../dist/apps/demo'),
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
// NOTE: generatePackageJson is missing here, but executor passes it. // NOTE: generatePackageJson is missing here, but executor passes it.
target: 'web', target: 'web',
compiler: 'swc', compiler: 'swc',

4
packages/node/src/generators/application/files/common/webpack.config.js__tmpl__
View File

@ -1,5 +1,5 @@
<% if (webpackPluginOptions) { %> <% if (webpackPluginOptions) { %>
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -7,7 +7,7 @@ module.exports = {
path: join(__dirname, '<%= offset %><%= webpackPluginOptions.outputPath %>'), path: join(__dirname, '<%= offset %><%= webpackPluginOptions.outputPath %>'),
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
target: 'node', target: 'node',
compiler: 'tsc', compiler: 'tsc',
main: '<%= webpackPluginOptions.main %>', main: '<%= webpackPluginOptions.main %>',

6
packages/react-native/src/generators/web-configuration/files/base-webpack/webpack.config.js__tmpl__
View File

@ -1,6 +1,6 @@
<% if (webpackPluginOptions) { %> <% if (webpackPluginOptions) { %>
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
module.exports = { module.exports = {
resolve: { resolve: {
@ -13,7 +13,7 @@ module.exports = {
port: 4200 port: 4200
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: '<%= webpackPluginOptions.tsConfig %>', tsConfig: '<%= webpackPluginOptions.tsConfig %>',
compiler: '<%= webpackPluginOptions.compiler %>', compiler: '<%= webpackPluginOptions.compiler %>',
main: '<%= webpackPluginOptions.main %>', main: '<%= webpackPluginOptions.main %>',

7
packages/react/index.ts
View File

@ -1,3 +1,9 @@
import { NxReactWebpackPlugin as _NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';
// TODO(v20): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
/** @deprecated Use '@nx/react/webpack-plugin' instead. */
export const NxReactWebpackPlugin = _NxReactWebpackPlugin;
export { export {
extraEslintDependencies, extraEslintDependencies,
extendReactEslintJson, extendReactEslintJson,
@ -22,4 +28,3 @@ export { componentTestGenerator } from './src/generators/component-test/componen
export { setupTailwindGenerator } from './src/generators/setup-tailwind/setup-tailwind'; export { setupTailwindGenerator } from './src/generators/setup-tailwind/setup-tailwind';
export type { SupportedStyles } from './typings/style'; export type { SupportedStyles } from './typings/style';
export * from './plugins/with-react'; export * from './plugins/with-react';
export { NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';

24
packages/react/src/generators/application/__snapshots__/application.spec.ts.snap
View File

@ -54,8 +54,8 @@ it('should have a greeting as the title', () => {
exports[`app --style @emotion/styled should exclude styles 1`] = ` exports[`app --style @emotion/styled should exclude styles 1`] = `
" "
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -66,7 +66,7 @@ module.exports = {
port: 4200 port: 4200
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'babel', compiler: 'babel',
main: './src/main.tsx', main: './src/main.tsx',
@ -145,8 +145,8 @@ nxViteTsPaths()],
exports[`app --style none should exclude styles 1`] = ` exports[`app --style none should exclude styles 1`] = `
" "
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -157,7 +157,7 @@ module.exports = {
port: 4200 port: 4200
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'babel', compiler: 'babel',
main: './src/main.tsx', main: './src/main.tsx',
@ -256,8 +256,8 @@ exports[`app setup React app with --bundler=vite should setup targets with vite
exports[`app should add custom webpack config 1`] = ` exports[`app should add custom webpack config 1`] = `
" "
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -268,7 +268,7 @@ module.exports = {
port: 4200 port: 4200
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'babel', compiler: 'babel',
main: './src/main.tsx', main: './src/main.tsx',
@ -374,8 +374,8 @@ nxViteTsPaths()],
exports[`app should setup webpack 1`] = ` exports[`app should setup webpack 1`] = `
" "
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -386,7 +386,7 @@ module.exports = {
port: 4200 port: 4200
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'babel', compiler: 'babel',
main: './src/main.tsx', main: './src/main.tsx',

6
packages/react/src/generators/application/files/base-webpack/webpack.config.js__tmpl__
View File

@ -1,6 +1,6 @@
<% if (webpackPluginOptions) { %> <% if (webpackPluginOptions) { %>
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -11,7 +11,7 @@ module.exports = {
port: 4200 port: 4200
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: '<%= webpackPluginOptions.tsConfig %>', tsConfig: '<%= webpackPluginOptions.tsConfig %>',
compiler: '<%= webpackPluginOptions.compiler %>', compiler: '<%= webpackPluginOptions.compiler %>',
main: '<%= webpackPluginOptions.main %>', main: '<%= webpackPluginOptions.main %>',

1
packages/react/webpack-plugin.ts Normal file
View File

@ -0,0 +1 @@
export { NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';

8
packages/web/src/generators/application/__snapshots__/application.spec.ts.snap
View File

@ -25,7 +25,7 @@ exports[`app should setup eslint 1`] = `
`; `;
exports[`app should setup the web build builder 1`] = ` exports[`app should setup the web build builder 1`] = `
"const { NxWebpackPlugin } = require('@nx/webpack'); "const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -36,7 +36,7 @@ module.exports = {
port: 4200, port: 4200,
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'babel', compiler: 'babel',
main: './src/main.ts', main: './src/main.ts',
@ -53,7 +53,7 @@ module.exports = {
`; `;
exports[`app should setup the web dev server 1`] = ` exports[`app should setup the web dev server 1`] = `
"const { NxWebpackPlugin } = require('@nx/webpack'); "const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -64,7 +64,7 @@ module.exports = {
port: 4200, port: 4200,
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'babel', compiler: 'babel',
main: './src/main.ts', main: './src/main.ts',

4
packages/web/src/generators/application/files/app-webpack/webpack.config.js__tmpl__
View File

@ -1,5 +1,5 @@
<% if (webpackPluginOptions) { %> <% if (webpackPluginOptions) { %>
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -10,7 +10,7 @@ module.exports = {
port: 4200 port: 4200
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: '<%= webpackPluginOptions.tsConfig %>', tsConfig: '<%= webpackPluginOptions.tsConfig %>',
compiler: '<%= webpackPluginOptions.compiler %>', compiler: '<%= webpackPluginOptions.compiler %>',
main: '<%= webpackPluginOptions.main %>', main: '<%= webpackPluginOptions.main %>',

2
packages/webpack/app-plugin.ts Normal file
View File

@ -0,0 +1,2 @@
export { NxAppWebpackPlugin } from './src/plugins/nx-webpack-plugin/nx-app-webpack-plugin';
export type { NxAppWebpackPluginOptions } from './src/plugins/nx-webpack-plugin/nx-app-webpack-plugin-options';

10
packages/webpack/index.ts
View File

@ -1,4 +1,6 @@
import { configurationGenerator } from './src/generators/configuration/configuration'; import { configurationGenerator } from './src/generators/configuration/configuration';
import { NxAppWebpackPlugin } from './src/plugins/nx-webpack-plugin/nx-app-webpack-plugin';
import { NxTsconfigPathsWebpackPlugin as _NxTsconfigPathsWebpackPlugin } from './src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';
export { configurationGenerator }; export { configurationGenerator };
@ -6,6 +8,12 @@ export { configurationGenerator };
/** @deprecated Use `configurationGenerator` instead. */ /** @deprecated Use `configurationGenerator` instead. */
export const webpackProjectGenerator = configurationGenerator; export const webpackProjectGenerator = configurationGenerator;
// TODO(v20): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
/** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead. */
export const NxWebpackPlugin = NxAppWebpackPlugin;
/** @deprecated Use NxTsconfigPathsWebpackPlugin from `@nx/webpack/tsconfig-paths-plugin` instead. */
export const NxTsconfigPathsWebpackPlugin = _NxTsconfigPathsWebpackPlugin;
export * from './src/utils/create-copy-plugin'; export * from './src/utils/create-copy-plugin';
export * from './src/utils/config'; export * from './src/utils/config';
export { webpackInitGenerator } from './src/generators/init/init'; export { webpackInitGenerator } from './src/generators/init/init';
@ -23,5 +31,3 @@ export * from './src/utils/get-css-module-local-ident';
export * from './src/utils/with-nx'; export * from './src/utils/with-nx';
export * from './src/utils/with-web'; export * from './src/utils/with-web';
export * from './src/utils/module-federation/public-api'; export * from './src/utils/module-federation/public-api';
export { NxWebpackPlugin } from './src/plugins/nx-webpack-plugin/nx-webpack-plugin';
export { NxTsconfigPathsWebpackPlugin } from './src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';

8
packages/webpack/src/generators/configuration/configuration.ts
View File

@ -106,7 +106,7 @@ function createWebpackConfig(
joinPathFragments(project.root, 'webpack.config.js'), joinPathFragments(project.root, 'webpack.config.js'),
hasPlugin(tree) hasPlugin(tree)
? ` ? `
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -116,7 +116,7 @@ module.exports = {
}'), }'),
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
target: '${buildOptions.target}', target: '${buildOptions.target}',
tsConfig: '${buildOptions.tsConfig}', tsConfig: '${buildOptions.tsConfig}',
compiler: '${buildOptions.compiler}', compiler: '${buildOptions.compiler}',
@ -142,7 +142,7 @@ module.exports = composePlugins(withNx(), withWeb(), (config) => {
joinPathFragments(project.root, 'webpack.config.js'), joinPathFragments(project.root, 'webpack.config.js'),
hasPlugin(tree) hasPlugin(tree)
? ` ? `
const { NxWebpackPlugin } = require('@nx/webpack'); const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -152,7 +152,7 @@ module.exports = {
}'), }'),
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
target: '${buildOptions.target}', target: '${buildOptions.target}',
tsConfig: '${buildOptions.tsConfig}', tsConfig: '${buildOptions.tsConfig}',
compiler: '${buildOptions.compiler}', compiler: '${buildOptions.compiler}',

8
packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-base-config.ts
View File

@ -16,7 +16,7 @@ import { getOutputHashFormat } from '../../../utils/hash-format';
import { NxTsconfigPathsWebpackPlugin } from '../../nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin'; import { NxTsconfigPathsWebpackPlugin } from '../../nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';
import { getTerserEcmaVersion } from './get-terser-ecma-version'; import { getTerserEcmaVersion } from './get-terser-ecma-version';
import { createLoaderFromCompiler } from './compiler-loaders'; import { createLoaderFromCompiler } from './compiler-loaders';
import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options'; import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
import TerserPlugin = require('terser-webpack-plugin'); import TerserPlugin = require('terser-webpack-plugin');
import nodeExternals = require('webpack-node-externals'); import nodeExternals = require('webpack-node-externals');
@ -29,7 +29,7 @@ const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
const mainFields = ['module', 'main']; const mainFields = ['module', 'main'];
export function applyBaseConfig( export function applyBaseConfig(
options: NormalizedNxWebpackPluginOptions, options: NormalizedNxAppWebpackPluginOptions,
config: Partial<WebpackOptionsNormalized | Configuration> = {}, config: Partial<WebpackOptionsNormalized | Configuration> = {},
{ {
useNormalizedEntry, useNormalizedEntry,
@ -57,7 +57,7 @@ export function applyBaseConfig(
} }
function applyNxIndependentConfig( function applyNxIndependentConfig(
options: NormalizedNxWebpackPluginOptions, options: NormalizedNxAppWebpackPluginOptions,
config: Partial<WebpackOptionsNormalized | Configuration> config: Partial<WebpackOptionsNormalized | Configuration>
): void { ): void {
const hashFormat = getOutputHashFormat(options.outputHashing as string); const hashFormat = getOutputHashFormat(options.outputHashing as string);
@ -205,7 +205,7 @@ function applyNxIndependentConfig(
} }
function applyNxDependentConfig( function applyNxDependentConfig(
options: NormalizedNxWebpackPluginOptions, options: NormalizedNxAppWebpackPluginOptions,
config: Partial<WebpackOptionsNormalized | Configuration>, config: Partial<WebpackOptionsNormalized | Configuration>,
{ useNormalizedEntry }: { useNormalizedEntry?: boolean } = {} { useNormalizedEntry }: { useNormalizedEntry?: boolean } = {}
): void { ): void {

4
packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts
View File

@ -10,7 +10,7 @@ import {
} from 'webpack'; } from 'webpack';
import { WriteIndexHtmlPlugin } from '../../write-index-html-plugin'; import { WriteIndexHtmlPlugin } from '../../write-index-html-plugin';
import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options'; import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
import { getOutputHashFormat } from '../../../utils/hash-format'; import { getOutputHashFormat } from '../../../utils/hash-format';
import { getClientEnvironment } from '../../../utils/get-client-environment'; import { getClientEnvironment } from '../../../utils/get-client-environment';
import { normalizeExtraEntryPoints } from '../../../utils/webpack/normalize-entry'; import { normalizeExtraEntryPoints } from '../../../utils/webpack/normalize-entry';
@ -24,7 +24,7 @@ import CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
import MiniCssExtractPlugin = require('mini-css-extract-plugin'); import MiniCssExtractPlugin = require('mini-css-extract-plugin');
export function applyWebConfig( export function applyWebConfig(
options: NormalizedNxWebpackPluginOptions, options: NormalizedNxAppWebpackPluginOptions,
config: Partial<WebpackOptionsNormalized | Configuration> = {}, config: Partial<WebpackOptionsNormalized | Configuration> = {},
{ {
useNormalizedEntry, useNormalizedEntry,

4
packages/webpack/src/plugins/nx-webpack-plugin/lib/compiler-loaders.ts
View File

@ -1,10 +1,10 @@
import * as path from 'path'; import * as path from 'path';
import { readTsConfig } from '@nx/js'; import { readTsConfig } from '@nx/js';
import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options'; import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
export function createLoaderFromCompiler( export function createLoaderFromCompiler(
options: NormalizedNxWebpackPluginOptions options: NormalizedNxAppWebpackPluginOptions
) { ) {
switch (options.compiler) { switch (options.compiler) {
case 'swc': case 'swc':

4
packages/webpack/src/plugins/nx-webpack-plugin/lib/instantiate-script-plugins.ts
View File

@ -4,10 +4,10 @@ import { WebpackPluginInstance } from 'webpack';
import { getOutputHashFormat } from '../../../utils/hash-format'; import { getOutputHashFormat } from '../../../utils/hash-format';
import { ScriptsWebpackPlugin } from '../../../utils/webpack/plugins/scripts-webpack-plugin'; import { ScriptsWebpackPlugin } from '../../../utils/webpack/plugins/scripts-webpack-plugin';
import { normalizeExtraEntryPoints } from '../../../utils/webpack/normalize-entry'; import { normalizeExtraEntryPoints } from '../../../utils/webpack/normalize-entry';
import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options'; import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
export function instantiateScriptPlugins( export function instantiateScriptPlugins(
options: NormalizedNxWebpackPluginOptions options: NormalizedNxAppWebpackPluginOptions
): WebpackPluginInstance[] { ): WebpackPluginInstance[] {
// process global scripts // process global scripts
const globalScriptsByBundleName = normalizeExtraEntryPoints( const globalScriptsByBundleName = normalizeExtraEntryPoints(

14
packages/webpack/src/plugins/nx-webpack-plugin/lib/normalize-options.ts
View File

@ -9,14 +9,14 @@ import {
import { import {
AssetGlobPattern, AssetGlobPattern,
FileReplacement, FileReplacement,
NormalizedNxWebpackPluginOptions, NormalizedNxAppWebpackPluginOptions,
NxWebpackPluginOptions, NxAppWebpackPluginOptions,
} from '../nx-webpack-plugin-options'; } from '../nx-app-webpack-plugin-options';
export function normalizeOptions( export function normalizeOptions(
options: NxWebpackPluginOptions options: NxAppWebpackPluginOptions
): NormalizedNxWebpackPluginOptions { ): NormalizedNxAppWebpackPluginOptions {
const combinedPluginAndMaybeExecutorOptions: Partial<NormalizedNxWebpackPluginOptions> = const combinedPluginAndMaybeExecutorOptions: Partial<NormalizedNxAppWebpackPluginOptions> =
{}; {};
const isProd = process.env.NODE_ENV === 'production'; const isProd = process.env.NODE_ENV === 'production';
// Since this is invoked by the executor, the graph has already been created and cached. // Since this is invoked by the executor, the graph has already been created and cached.
@ -197,7 +197,7 @@ export function normalizeFileReplacements(
function normalizeRelativePaths( function normalizeRelativePaths(
projectRoot: string, projectRoot: string,
options: NxWebpackPluginOptions options: NxAppWebpackPluginOptions
): void { ): void {
for (const [fieldName, fieldValue] of Object.entries(options)) { for (const [fieldName, fieldValue] of Object.entries(options)) {
if (isRelativePath(fieldValue)) { if (isRelativePath(fieldValue)) {

10
packages/webpack/src/plugins/nx-webpack-plugin/lib/stylesheet-loaders.ts
View File

@ -5,7 +5,7 @@ import MiniCssExtractPlugin = require('mini-css-extract-plugin');
import { getCSSModuleLocalIdent } from '../../../utils/get-css-module-local-ident'; import { getCSSModuleLocalIdent } from '../../../utils/get-css-module-local-ident';
import { getOutputHashFormat } from '../../../utils/hash-format'; import { getOutputHashFormat } from '../../../utils/hash-format';
import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options'; import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
import { PostcssCliResources } from '../../../utils/webpack/plugins/postcss-cli-resources'; import { PostcssCliResources } from '../../../utils/webpack/plugins/postcss-cli-resources';
interface PostcssOptions { interface PostcssOptions {
@ -15,7 +15,7 @@ interface PostcssOptions {
} }
export function getCommonLoadersForCssModules( export function getCommonLoadersForCssModules(
options: NormalizedNxWebpackPluginOptions, options: NormalizedNxAppWebpackPluginOptions,
includePaths: string[] includePaths: string[]
) { ) {
// load component css as raw strings // load component css as raw strings
@ -49,7 +49,7 @@ export function getCommonLoadersForCssModules(
} }
export function getCommonLoadersForGlobalCss( export function getCommonLoadersForGlobalCss(
options: NormalizedNxWebpackPluginOptions, options: NormalizedNxAppWebpackPluginOptions,
includePaths: string[] includePaths: string[]
) { ) {
return [ return [
@ -72,7 +72,7 @@ export function getCommonLoadersForGlobalCss(
} }
export function getCommonLoadersForGlobalStyle( export function getCommonLoadersForGlobalStyle(
options: NormalizedNxWebpackPluginOptions, options: NormalizedNxAppWebpackPluginOptions,
includePaths: string[] includePaths: string[]
) { ) {
return [ return [
@ -96,7 +96,7 @@ export function getCommonLoadersForGlobalStyle(
} }
function postcssOptionsCreator( function postcssOptionsCreator(
options: NormalizedNxWebpackPluginOptions, options: NormalizedNxAppWebpackPluginOptions,
{ {
includePaths, includePaths,
forCssModules = false, forCssModules = false,

6
packages/webpack/src/plugins/nx-webpack-plugin/nx-webpack-plugin-options.ts → packages/webpack/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin-options.ts
View File

@ -37,7 +37,7 @@ export interface OptimizationOptions {
styles: boolean; styles: boolean;
} }
export interface NxWebpackPluginOptions { export interface NxAppWebpackPluginOptions {
/** /**
* The tsconfig file for the project. e.g. `tsconfig.json` * The tsconfig file for the project. e.g. `tsconfig.json`
*/ */
@ -212,8 +212,8 @@ export interface NxWebpackPluginOptions {
watch?: boolean; watch?: boolean;
} }
export interface NormalizedNxWebpackPluginOptions export interface NormalizedNxAppWebpackPluginOptions
extends NxWebpackPluginOptions { extends NxAppWebpackPluginOptions {
projectName: string; projectName: string;
root: string; root: string;
projectRoot: string; projectRoot: string;

12
packages/webpack/src/plugins/nx-webpack-plugin/nx-webpack-plugin.ts → packages/webpack/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin.ts
View File

@ -1,8 +1,8 @@
import { Compiler } from 'webpack'; import { Compiler } from 'webpack';
import { import {
NormalizedNxWebpackPluginOptions, NormalizedNxAppWebpackPluginOptions,
NxWebpackPluginOptions, NxAppWebpackPluginOptions,
} from './nx-webpack-plugin-options'; } from './nx-app-webpack-plugin-options';
import { normalizeOptions } from './lib/normalize-options'; import { normalizeOptions } from './lib/normalize-options';
import { deleteOutputDir } from '../../utils/fs'; import { deleteOutputDir } from '../../utils/fs';
import { applyBaseConfig } from './lib/apply-base-config'; import { applyBaseConfig } from './lib/apply-base-config';
@ -18,10 +18,10 @@ import { applyWebConfig } from './lib/apply-web-config';
* *
* Web-only features, such as stylesheets and images, are only supported when `target` is 'web' or 'webworker'. * Web-only features, such as stylesheets and images, are only supported when `target` is 'web' or 'webworker'.
*/ */
export class NxWebpackPlugin { export class NxAppWebpackPlugin {
private readonly options: NormalizedNxWebpackPluginOptions; private readonly options: NormalizedNxAppWebpackPluginOptions;
constructor(options: NxWebpackPluginOptions = {}) { constructor(options: NxAppWebpackPluginOptions = {}) {
// If we're building inferred targets, skip normalizing build options. // If we're building inferred targets, skip normalizing build options.
if (!global.NX_GRAPH_CREATION) { if (!global.NX_GRAPH_CREATION) {
this.options = normalizeOptions(options); this.options = normalizeOptions(options);

4
packages/webpack/src/utils/with-nx.ts
View File

@ -1,12 +1,12 @@
import { Configuration } from 'webpack'; import { Configuration } from 'webpack';
import { NxComposableWebpackPlugin, NxWebpackExecutionContext } from './config'; import { NxComposableWebpackPlugin, NxWebpackExecutionContext } from './config';
import { applyBaseConfig } from '../plugins/nx-webpack-plugin/lib/apply-base-config'; import { applyBaseConfig } from '../plugins/nx-webpack-plugin/lib/apply-base-config';
import { NxWebpackPluginOptions } from '../plugins/nx-webpack-plugin/nx-webpack-plugin-options'; import { NxAppWebpackPluginOptions } from '../plugins/nx-webpack-plugin/nx-app-webpack-plugin-options';
import { normalizeAssets } from '../plugins/nx-webpack-plugin/lib/normalize-options'; import { normalizeAssets } from '../plugins/nx-webpack-plugin/lib/normalize-options';
const processed = new Set(); const processed = new Set();
export type WithNxOptions = Partial<NxWebpackPluginOptions>; export type WithNxOptions = Partial<NxAppWebpackPluginOptions>;
/** /**
* @param {WithNxOptions} pluginOptions * @param {WithNxOptions} pluginOptions

1
packages/webpack/tsconfig-paths-plugin.ts Normal file
View File

@ -0,0 +1 @@
export { NxTsconfigPathsWebpackPlugin } from './src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';

12
packages/workspace/src/generators/preset/__snapshots__/preset.spec.ts.snap
View File

@ -37,8 +37,8 @@ exports[`preset should create files (preset = angular-monorepo) 3`] = `
`; `;
exports[`preset should create files (preset = react-monorepo) 1`] = ` exports[`preset should create files (preset = react-monorepo) 1`] = `
"const { NxWebpackPlugin } = require('@nx/webpack'); "const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -49,7 +49,7 @@ module.exports = {
port: 4200, port: 4200,
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'babel', compiler: 'babel',
main: './src/main.tsx', main: './src/main.tsx',
@ -124,8 +124,8 @@ export default defineConfig({
`; `;
exports[`preset should create files (preset = react-standalone bundler = webpack) 1`] = ` exports[`preset should create files (preset = react-standalone bundler = webpack) 1`] = `
"const { NxWebpackPlugin } = require('@nx/webpack'); "const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { NxReactWebpackPlugin } = require('@nx/react'); const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
const { join } = require('path'); const { join } = require('path');
module.exports = { module.exports = {
@ -136,7 +136,7 @@ module.exports = {
port: 4200, port: 4200,
}, },
plugins: [ plugins: [
new NxWebpackPlugin({ new NxAppWebpackPlugin({
tsConfig: './tsconfig.app.json', tsConfig: './tsconfig.app.json',
compiler: 'babel', compiler: 'babel',
main: './src/main.tsx', main: './src/main.tsx',