Skip to content

Commit 192ab6b

Browse files
iclantoniclanton
authored
Merge pull request microsoft#1735 from iclanton/ianc/public-path-with-loc
[set-webpack-public-path-plugin] Add functionality to use the webpack-produced asset name to find the script path.
2 parents 3d6209b + f40191c commit 192ab6b

9 files changed

Lines changed: 204 additions & 82 deletions

File tree

‎build-tests/localization-plugin-test/webpack.config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,7 @@ module.exports = function(env) {
103103
}),
104104
new SetPublicPathPlugin({
105105
scriptName: {
106-
name: '[name]_[locale]_[contenthash].js',
107-
isTokenized: true
106+
useAssetName: true
108107
}
109108
}),
110109
new HtmlWebpackPlugin()

‎common/changes/@microsoft/set-webpack-public-path-plugin/ianc-public-path-with-loc_2020-02-02-04-02.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"changes": [
3+
{
4+
"packageName": "@microsoft/set-webpack-public-path-plugin",
5+
"comment": "Add functionality to use the webpack-produced asset name to find the loaded acript.",
6+
"type": "minor"
7+
}
8+
],
9+
"packageName": "@microsoft/set-webpack-public-path-plugin",
10+
"email": "iclanton@users.noreply.github.com"
11+
}

‎common/reviews/api/set-webpack-public-path-plugin.api.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@ export interface ISetWebpackPublicPathOptions {
2323
// @public
2424
export interface ISetWebpackPublicPathPluginOptions extends ISetWebpackPublicPathOptions {
2525
scriptName?: {
26-
name: string;
27-
isTokenized: boolean;
26+
useAssetName?: boolean;
27+
name?: string;
28+
isTokenized?: boolean;
2829
};
2930
}
3031

‎webpack/localization-plugin/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
"peerDependencies": {
1919
"@types/webpack": "*"
2020
},
21+
"optionalPeerDependencies": {
22+
"@microsoft/set-webpack-public-path-plugin": "^2.3.4"
23+
},
2124
"dependencies": {
2225
"@types/node": "10.17.13",
2326
"@types/tapable": "1.0.4",
@@ -33,6 +36,7 @@
3336
"@types/webpack": "4.39.8",
3437
"@microsoft/rush-stack-compiler-3.5": "0.4.3",
3538
"@microsoft/node-library-build": "6.4.4",
39+
"@microsoft/set-webpack-public-path-plugin": "2.3.4",
3640
"@rushstack/eslint-config": "0.5.4",
3741
"@types/glob": "7.1.1",
3842
"@types/loader-utils": "1.1.3",

‎webpack/localization-plugin/src/LocalizationPlugin.ts‎

Lines changed: 48 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -84,13 +84,17 @@ export class LocalizationPlugin implements Webpack.Plugin {
8484
throw new Error('The localization plugin requires webpack 4');
8585
}
8686

87+
// https://github.com/webpack/webpack-dev-server/pull/1929/files#diff-15fb51940da53816af13330d8ce69b4eR66
88+
const isWebpackDevServer: boolean = process.env.WEBPACK_DEV_SERVER === 'true';
89+
8790
const errors: Error[] = this._initializeAndValidateOptions(compiler.options);
8891

8992
const webpackConfigurationUpdaterOptions: IWebpackConfigurationUpdaterOptions = {
93+
pluginInstance: this,
9094
configuration: compiler.options,
9195
locFiles: this._locFiles,
9296
filesToIgnore: this._filesToIgnore,
93-
pluginInstance: this
97+
localeNameOrPlaceholder: this._localeNamePlaceholder.value
9498
};
9599

96100
if (errors.length > 0) {
@@ -103,8 +107,6 @@ export class LocalizationPlugin implements Webpack.Plugin {
103107
return;
104108
}
105109

106-
// https://github.com/webpack/webpack-dev-server/pull/1929/files#diff-15fb51940da53816af13330d8ce69b4eR66
107-
const isWebpackDevServer: boolean = process.env.WEBPACK_DEV_SERVER === 'true';
108110
if (isWebpackDevServer) {
109111
WebpackConfigurationUpdater.amendWebpackConfigurationForInPlaceLocFiles(compiler.options);
110112
} else if (this._locales.size === 1) {
@@ -157,43 +159,51 @@ export class LocalizationPlugin implements Webpack.Plugin {
157159
return;
158160
}
159161

160-
const chunkFiles: string[] = chunkGroup.getFiles();
161-
for (const chunkFileName of chunkFiles) {
162-
if (
163-
chunkFileName.match(Constants.LOCALE_FILENAME_PLACEHOLDER_REGEX) && // Ensure this is expected to be localized
164-
chunkFileName.endsWith('.js') && // Ensure this is a JS file
165-
!alreadyProcessedAssets.has(chunkFileName) // Ensure this isn't a vendor chunk we've already processed
166-
) {
167-
alreadyProcessedAssets.add(chunkFileName);
168-
169-
const asset: IAsset = compilation.assets[chunkFileName];
170-
const resultingAssets: Map<string, IProcessAssetResult> = this._processAsset(
171-
compilation,
172-
chunkFileName,
173-
asset
174-
);
175-
176-
// Delete the existing asset because it's been renamed
177-
delete compilation.assets[chunkFileName];
178-
179-
const localizedChunkAssets: { [locale: string]: string } = {};
180-
for (const [locale, newAsset] of resultingAssets) {
181-
compilation.assets[newAsset.filename] = newAsset.asset;
182-
localizedChunkAssets[locale] = newAsset.filename;
183-
}
162+
for (const chunk of chunkGroup.chunks) {
163+
// Clone the chunk files array because we're going to modify it
164+
const chunkFiles: string[] = [...chunk.files];
165+
const chunkFilesSet: Set<string> = new Set(chunkFiles);
166+
for (const chunkFileName of chunkFiles) {
167+
if (
168+
chunkFileName.match(Constants.LOCALE_FILENAME_PLACEHOLDER_REGEX) && // Ensure this is expected to be localized
169+
chunkFileName.endsWith('.js') && // Ensure this is a JS file
170+
!alreadyProcessedAssets.has(chunkFileName) // Ensure this isn't a vendor chunk we've already processed
171+
) {
172+
alreadyProcessedAssets.add(chunkFileName);
173+
174+
const asset: IAsset = compilation.assets[chunkFileName];
175+
const resultingAssets: Map<string, IProcessAssetResult> = this._processAsset(
176+
compilation,
177+
chunkFileName,
178+
asset
179+
);
180+
181+
// Delete the existing asset because it's been renamed
182+
delete compilation.assets[chunkFileName];
183+
chunkFilesSet.delete(chunkFileName);
184+
185+
const localizedChunkAssets: { [locale: string]: string } = {};
186+
for (const [locale, newAsset] of resultingAssets) {
187+
compilation.assets[newAsset.filename] = newAsset.asset;
188+
localizedChunkAssets[locale] = newAsset.filename;
189+
chunkFilesSet.add(newAsset.filename);
190+
}
184191

185-
if (chunkGroup.getParents().length > 0) {
186-
// This is a secondary chunk
187-
localizationStats.namedChunkGroups[chunkGroup.name] = {
188-
localizedAssets: localizedChunkAssets
189-
};
190-
} else {
191-
// This is an entrypoint
192-
localizationStats.entrypoints[chunkGroup.name] = {
193-
localizedAssets: localizedChunkAssets
194-
};
192+
if (chunkGroup.getParents().length > 0) {
193+
// This is a secondary chunk
194+
localizationStats.namedChunkGroups[chunkGroup.name] = {
195+
localizedAssets: localizedChunkAssets
196+
};
197+
} else {
198+
// This is an entrypoint
199+
localizationStats.entrypoints[chunkGroup.name] = {
200+
localizedAssets: localizedChunkAssets
201+
};
202+
}
195203
}
196204
}
205+
206+
chunk.files = Array.from(chunkFilesSet);
197207
}
198208
}
199209

@@ -241,7 +251,7 @@ export class LocalizationPlugin implements Webpack.Plugin {
241251
const placeholderPrefix: string = Constants.STRING_PLACEHOLDER_PREFIX;
242252
const placeholderRegex: RegExp = new RegExp(
243253
// The maximum length of quotemark escaping we can support is the length of the placeholder prefix
244-
`${lodash.escapeRegExp(placeholderPrefix)}_((?:.){1,${placeholderPrefix.length}})_(\\d+)`,
254+
`${placeholderPrefix}_((?:.){1,${placeholderPrefix.length}})_(\\d+)`,
245255
'g'
246256
);
247257
const result: Map<string, IProcessAssetResult> = new Map<string, IProcessAssetResult>();

‎webpack/localization-plugin/src/WebpackConfigurationUpdater.ts‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@
33

44
import * as path from 'path';
55
import * as Webpack from 'webpack';
6+
import * as SetPublicPathPluginPackageType from '@microsoft/set-webpack-public-path-plugin';
67

78
import { Constants } from './utilities/Constants';
89
import { LocalizationPlugin } from './LocalizationPlugin';
910

1011
export interface IWebpackConfigurationUpdaterOptions {
12+
pluginInstance: LocalizationPlugin;
1113
configuration: Webpack.Configuration;
1214
locFiles: Set<string>;
1315
filesToIgnore: Set<string>;
14-
pluginInstance: LocalizationPlugin
16+
localeNameOrPlaceholder: string;
1517
}
1618

1719
export interface ISingleLocaleConfigOptions extends IWebpackConfigurationUpdaterOptions {
@@ -28,6 +30,8 @@ export class WebpackConfigurationUpdater {
2830
};
2931

3032
WebpackConfigurationUpdater._addLoadersForProvidedLocFiles(options, loader, loaderOptions);
33+
34+
WebpackConfigurationUpdater._tryUpdateLocaleTokenInPublicPathPlugin(options);
3135
}
3236

3337
public static amendWebpackConfigurationForSingleLocale(options: ISingleLocaleConfigOptions): void {
@@ -49,6 +53,11 @@ export class WebpackConfigurationUpdater {
4953
passthroughLocale: options.passthroughLocale
5054
};
5155
WebpackConfigurationUpdater._addLoadersForProvidedLocFiles(options, loader, loaderOptions);
56+
57+
WebpackConfigurationUpdater._tryUpdateLocaleTokenInPublicPathPlugin({
58+
...options,
59+
localeNameOrPlaceholder: options.localeName
60+
});
5261
}
5362

5463
public static amendWebpackConfigurationForInPlaceLocFiles(configuration: Webpack.Configuration): void {
@@ -72,6 +81,35 @@ export class WebpackConfigurationUpdater {
7281
);
7382
}
7483

84+
private static _tryUpdateLocaleTokenInPublicPathPlugin(options: IWebpackConfigurationUpdaterOptions): void {
85+
let setPublicPathPlugin: typeof SetPublicPathPluginPackageType.SetPublicPathPlugin | undefined;
86+
try {
87+
// eslint-disable-next-line @typescript-eslint/no-var-requires
88+
const pluginPackage: typeof SetPublicPathPluginPackageType = require('@microsoft/set-webpack-public-path-plugin');
89+
setPublicPathPlugin = pluginPackage.SetPublicPathPlugin;
90+
} catch (e) {
91+
// public path plugin isn't present - ignore
92+
}
93+
94+
if (setPublicPathPlugin && options.configuration.plugins) {
95+
for (const plugin of options.configuration.plugins) {
96+
if (plugin instanceof setPublicPathPlugin) {
97+
if (
98+
plugin.options &&
99+
plugin.options.scriptName &&
100+
plugin.options.scriptName.isTokenized &&
101+
plugin.options.scriptName.name
102+
) {
103+
plugin.options.scriptName.name = plugin.options.scriptName.name.replace(
104+
/\[locale\]/g,
105+
options.localeNameOrPlaceholder
106+
);
107+
}
108+
}
109+
}
110+
}
111+
}
112+
75113
private static _addLoadersForProvidedLocFiles(
76114
options: IWebpackConfigurationUpdaterOptions,
77115
loader: string,

‎webpack/set-webpack-public-path-plugin/README.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,20 +28,25 @@ import { SetPublicPathPlugin } from '@microsoft/set-webpack-public-path-plugin';
2828

2929
#### `scriptName = { }`
3030

31-
This parameter is an object that takes two properties: a string property `name`, and a boolean property `isTokenized`.
31+
This parameter is an object that takes three properties: a string property `name`, a boolean property `isTokenized`,
32+
and a boolean property `useAssetName`
33+
3234
The `name` property is a regular expression string that is applied to all script URLs on the page. The last directory
3335
of the URL that matches the regular expression is used as the public path. For example, if the `name` property
3436
is set to `my\-bundle_?[a-zA-Z0-9-_]*\.js` and a script's URL is `https://mycdn.net/files/build_id/assets/my-bundle_10fae182eb.js`,
3537
the public path will be set to `https://mycdn.net/files/build_id/assets/`.
3638

37-
If the `isTokenized` paramter is set to `true`, the regular expression string in `name` is treated as a tokenized
39+
If the `isTokenized` parameter is set to `true`, the regular expression string in `name` is treated as a tokenized
3840
string. The supported tokens are `[name]` and `[hash]`. Instances of the `[name]` substring are replaced with the
3941
chunk's name, and instances of the `[hash]` substring are replaced with the chunk's rendered hash. The name
4042
is regular expression-escaped. For example, if the `name` property is set to `[name]_?[a-zA-Z0-9-_]*\.js`,
4143
`isTokenized` is set to `true`, and the chunk's name is `my-bundle`, and a script's URL is
4244
`https://mycdn.net/files/build_id/assets/my-bundle_10fae182eb.js`, the public path will be set to
4345
`https://mycdn.net/files/build_id/assets/`.
4446

47+
If the `useAssetName` property is set, the plugin will use the Webpack-produced asset name as it would the `name`
48+
property. `useAssetName` is exclusive to `name` and `isTokenized`.
49+
4550
This option is exclusive to other options. If it is set, `systemJs`, `publicPath`, and `urlPrefix` will be ignored.
4651

4752
#### `systemJs = true`

0 commit comments

Comments
 (0)