Update to use Webpack 5.
This commit is contained in:
Родитель
e822aabb74
Коммит
662ca65a43
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"changes": [
|
||||
{
|
||||
"packageName": "@microsoft/gulp-core-build-webpack",
|
||||
"comment": "Update to use Webpack 5 and drop support for Webpack 4.",
|
||||
"type": "major"
|
||||
}
|
||||
],
|
||||
"packageName": "@microsoft/gulp-core-build-webpack"
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"changes": [
|
||||
{
|
||||
"packageName": "@microsoft/gulp-core-build-webpack",
|
||||
"comment": "Remove the built-in webpack configuration and the `--initwebpack` CLI parameter.",
|
||||
"type": "major"
|
||||
}
|
||||
],
|
||||
"packageName": "@microsoft/gulp-core-build-webpack"
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"changes": [
|
||||
{
|
||||
"packageName": "@microsoft/web-library-build",
|
||||
"comment": "Update to Webpack 5.",
|
||||
"type": "major"
|
||||
}
|
||||
],
|
||||
"packageName": "@microsoft/web-library-build"
|
||||
}
|
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
@ -1,5 +1,5 @@
|
|||
// DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
|
||||
{
|
||||
"pnpmShrinkwrapHash": "ce69845934c5c1570358260bd74a829f8eeb0646",
|
||||
"pnpmShrinkwrapHash": "5222b83155bac93bc27dafd5bf79bec38e1aa1ae",
|
||||
"preferredVersionsHash": "6a96c5550f3ce50aa19e8d1141c6c5d4176953ff"
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
import * as Gulp from 'gulp';
|
||||
import { GulpTask } from '@microsoft/gulp-core-build';
|
||||
import { IBuildConfig } from '@microsoft/gulp-core-build';
|
||||
import * as Webpack from 'webpack';
|
||||
import type * as Webpack from 'webpack';
|
||||
|
||||
// @public (undocumented)
|
||||
export interface IWebpackResources {
|
||||
|
|
|
@ -12,9 +12,6 @@
|
|||
### Description
|
||||
This task invokes webpack using a consumer-specified `webpack.config.js` on a package.
|
||||
|
||||
### Command Line Options
|
||||
If the `--initwebpack` flag is passed to the command line, this task will initialize a `webpack.config.js` which bundles `lib/index.js` into `dist/{packagename}.js as a UMD module.
|
||||
|
||||
### Config
|
||||
```typescript
|
||||
interface IWebpackConfig {
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
"@types/node": "10.17.13",
|
||||
"colors": "~1.2.1",
|
||||
"gulp": "~4.0.2",
|
||||
"webpack": "~4.47.0"
|
||||
"webpack": "~5.88.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/node-library-build": "workspace:*",
|
||||
|
@ -29,7 +29,6 @@
|
|||
"@types/source-map": "0.5.0",
|
||||
"@types/tapable": "1.0.6",
|
||||
"@types/uglify-js": "2.6.29",
|
||||
"@types/webpack": "4.41.24",
|
||||
"eslint": "~7.12.1",
|
||||
"tapable": "1.1.3"
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
// See LICENSE in the project root for license information.
|
||||
|
||||
import * as colors from 'colors';
|
||||
import * as Webpack from 'webpack';
|
||||
import type * as Webpack from 'webpack';
|
||||
import { GulpTask, IBuildConfig } from '@microsoft/gulp-core-build';
|
||||
import * as Gulp from 'gulp';
|
||||
import { EOL } from 'os';
|
||||
|
@ -84,133 +84,138 @@ export class WebpackTask<TExtendedConfig = {}> extends GulpTask<IWebpackTaskConf
|
|||
}
|
||||
|
||||
public executeTask(gulp: typeof Gulp, completeCallback: (error?: string) => void): void {
|
||||
const shouldInitWebpack: boolean = process.argv.indexOf('--initwebpack') > -1;
|
||||
|
||||
// eslint-disable-next-line
|
||||
const path = require('path');
|
||||
|
||||
if (shouldInitWebpack) {
|
||||
this.log(
|
||||
'Initializing a webpack.config.js, which bundles lib/index.js ' +
|
||||
'into dist/packagename.js into a UMD module.'
|
||||
);
|
||||
let webpackConfig: any; // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
|
||||
this.copyFile(path.resolve(__dirname, 'webpack.config.js'));
|
||||
completeCallback();
|
||||
} else {
|
||||
let webpackConfig: any; // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
|
||||
if (this.taskConfig.configPath && this.fileExists(this.taskConfig.configPath)) {
|
||||
try {
|
||||
webpackConfig = require(this.resolvePath(this.taskConfig.configPath));
|
||||
} catch (err) {
|
||||
completeCallback(`Error parsing webpack config: ${this.taskConfig.configPath}: ${err}`);
|
||||
return;
|
||||
}
|
||||
} else if (this.taskConfig.config) {
|
||||
webpackConfig = this.taskConfig.config;
|
||||
} else {
|
||||
this._logMissingConfigWarning();
|
||||
completeCallback();
|
||||
if (this.taskConfig.configPath && this.fileExists(this.taskConfig.configPath)) {
|
||||
try {
|
||||
webpackConfig = require(this.resolvePath(this.taskConfig.configPath));
|
||||
} catch (err) {
|
||||
completeCallback(`Error parsing webpack config: ${this.taskConfig.configPath}: ${err}`);
|
||||
return;
|
||||
}
|
||||
} else if (this.taskConfig.config) {
|
||||
webpackConfig = this.taskConfig.config;
|
||||
} else {
|
||||
this._logMissingConfigWarning();
|
||||
completeCallback();
|
||||
return;
|
||||
}
|
||||
|
||||
if (webpackConfig) {
|
||||
const webpack: typeof Webpack = this.taskConfig.webpack || require('webpack');
|
||||
const startTime: number = new Date().getTime();
|
||||
const outputDir: string = this.buildConfig.distFolder;
|
||||
if (webpackConfig) {
|
||||
const webpack: typeof Webpack = this.taskConfig.webpack || require('webpack');
|
||||
if (parseInt(webpack.version) !== 5) {
|
||||
this.logWarning(
|
||||
`This version of gulp-core-build-webpack is designed to work with webpack 5. ` +
|
||||
`You are currently using webpack ${webpack.version}.`
|
||||
);
|
||||
}
|
||||
const startTime: number = new Date().getTime();
|
||||
const outputDir: string = this.buildConfig.distFolder;
|
||||
|
||||
webpack(webpackConfig, (error, stats) => {
|
||||
if (!this.buildConfig.properties) {
|
||||
this.buildConfig.properties = {};
|
||||
webpack(webpackConfig, (error, stats) => {
|
||||
if (!this.buildConfig.properties) {
|
||||
this.buildConfig.properties = {};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line dot-notation
|
||||
this.buildConfig.properties['webpackStats'] = stats;
|
||||
|
||||
let statsResult: Webpack.StatsCompilation | undefined;
|
||||
try {
|
||||
statsResult = stats?.toJson({
|
||||
hash: false,
|
||||
source: false
|
||||
});
|
||||
} catch (e) {
|
||||
this.logError(`Error processing webpack stats: ${e}`);
|
||||
|
||||
if (error) {
|
||||
// Log this here in case we didn't get a stats object because of an error. Otherwise log errors
|
||||
// from the stats object.
|
||||
this.logError(`Webpack error: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (statsResult) {
|
||||
if (statsResult.errors && statsResult.errors.length) {
|
||||
this.logError(`'${outputDir}':` + EOL + statsResult.errors.join(EOL) + EOL);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line dot-notation
|
||||
this.buildConfig.properties['webpackStats'] = stats;
|
||||
if (statsResult.warnings && statsResult.warnings.length) {
|
||||
const unsuppressedWarnings: Webpack.StatsError[] = [];
|
||||
const warningSuppressionRegexes: RegExp[] = (this.taskConfig.suppressWarnings || []).map(
|
||||
(regex: string) => {
|
||||
return new RegExp(regex);
|
||||
}
|
||||
);
|
||||
|
||||
let statsResult: Webpack.Stats.ToJsonOutput | undefined;
|
||||
try {
|
||||
statsResult = stats.toJson({
|
||||
hash: false,
|
||||
source: false
|
||||
});
|
||||
} catch (e) {
|
||||
this.logError(`Error processing webpack stats: ${e}`);
|
||||
|
||||
if (error) {
|
||||
// Log this here in case we didn't get a stats object because of an error. Otherwise log errors
|
||||
// from the stats object.
|
||||
this.logError(`Webpack error: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (statsResult) {
|
||||
if (statsResult.errors && statsResult.errors.length) {
|
||||
this.logError(`'${outputDir}':` + EOL + statsResult.errors.join(EOL) + EOL);
|
||||
}
|
||||
|
||||
if (statsResult.warnings && statsResult.warnings.length) {
|
||||
const unsuppressedWarnings: string[] = [];
|
||||
const warningSuppressionRegexes: RegExp[] = (this.taskConfig.suppressWarnings || []).map(
|
||||
(regex: string) => {
|
||||
return new RegExp(regex);
|
||||
for (const warning of statsResult.warnings) {
|
||||
let suppressed: boolean = false;
|
||||
for (let i: number = 0; i < warningSuppressionRegexes.length; i++) {
|
||||
const suppressionRegex: RegExp = warningSuppressionRegexes[i];
|
||||
if (warning.message.match(suppressionRegex)) {
|
||||
suppressed = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!suppressed) {
|
||||
unsuppressedWarnings.push(warning);
|
||||
}
|
||||
}
|
||||
|
||||
if (unsuppressedWarnings.length > 0) {
|
||||
this.logWarning(
|
||||
`'${outputDir}':` +
|
||||
EOL +
|
||||
unsuppressedWarnings
|
||||
.map(
|
||||
(unsuppressedWarning) =>
|
||||
(unsuppressedWarning.loc ? `${unsuppressedWarning.loc}: ` : '') +
|
||||
unsuppressedWarning.message
|
||||
)
|
||||
.join(EOL) +
|
||||
EOL
|
||||
);
|
||||
|
||||
for (const warning of statsResult.warnings) {
|
||||
let suppressed: boolean = false;
|
||||
for (let i: number = 0; i < warningSuppressionRegexes.length; i++) {
|
||||
const suppressionRegex: RegExp = warningSuppressionRegexes[i];
|
||||
if (warning.match(suppressionRegex)) {
|
||||
suppressed = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!suppressed) {
|
||||
unsuppressedWarnings.push(warning);
|
||||
}
|
||||
}
|
||||
|
||||
if (unsuppressedWarnings.length > 0) {
|
||||
this.logWarning(`'${outputDir}':` + EOL + unsuppressedWarnings.join(EOL) + EOL);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.taskConfig.printStats) {
|
||||
const duration: number = new Date().getTime() - startTime;
|
||||
const statsResultChildren: Webpack.Stats.ToJsonOutput[] = statsResult.children
|
||||
? statsResult.children
|
||||
: [statsResult];
|
||||
if (this.taskConfig.printStats) {
|
||||
const duration: number = new Date().getTime() - startTime;
|
||||
const statsResultChildren: Webpack.StatsCompilation[] = statsResult.children
|
||||
? statsResult.children
|
||||
: [statsResult];
|
||||
|
||||
for (const child of statsResultChildren) {
|
||||
if (child.chunks) {
|
||||
for (const chunk of child.chunks) {
|
||||
if (chunk.files) {
|
||||
for (const file of chunk.files) {
|
||||
this.log(
|
||||
`Bundled: '${colors.cyan(path.basename(file))}', ` +
|
||||
`size: ${colors.magenta(chunk.size.toString())} bytes, ` +
|
||||
`took ${colors.magenta(duration.toString(10))} ms.`
|
||||
);
|
||||
}
|
||||
for (const child of statsResultChildren) {
|
||||
if (child.chunks) {
|
||||
for (const chunk of child.chunks) {
|
||||
if (chunk.files) {
|
||||
for (const file of chunk.files) {
|
||||
this.log(
|
||||
`Bundled: '${colors.cyan(path.basename(file))}', ` +
|
||||
`size: ${colors.magenta(chunk.size.toString())} bytes, ` +
|
||||
`took ${colors.magenta(duration.toString(10))} ms.`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
completeCallback();
|
||||
}); // endwebpack callback
|
||||
}
|
||||
completeCallback();
|
||||
}); // endwebpack callback
|
||||
}
|
||||
}
|
||||
|
||||
private _logMissingConfigWarning(): void {
|
||||
this.logWarning(
|
||||
'No webpack config has been provided. ' +
|
||||
'Run again using --initwebpack to create a default config, ' +
|
||||
'Create a webpack.config.js file ' +
|
||||
`or call webpack.setConfig({ configPath: null }) in your gulpfile.`
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,62 +0,0 @@
|
|||
// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
|
||||
// See LICENSE in the project root for license information.
|
||||
|
||||
import * as Webpack from 'webpack';
|
||||
// @ts-ignore
|
||||
import * as WebpackDevServer from 'webpack-dev-server'; // eslint-disable-line
|
||||
import { WebpackTask } from './WebpackTask';
|
||||
import * as path from 'path';
|
||||
|
||||
// Note: this require may need to be fixed to point to the build that exports the gulp-core-build-webpack instance.
|
||||
const webpackTask: WebpackTask = require('@microsoft/web-library-build').webpack;
|
||||
const webpack: typeof Webpack = webpackTask.resources.webpack;
|
||||
|
||||
const isProduction: boolean = webpackTask.buildConfig.production;
|
||||
|
||||
// eslint-disable-next-line
|
||||
const packageJSON: { name: string } = require('./package.json');
|
||||
|
||||
const webpackConfiguration: Webpack.Configuration = {
|
||||
context: __dirname,
|
||||
devtool: isProduction ? undefined : 'source-map',
|
||||
|
||||
entry: {
|
||||
[packageJSON.name]: path.join(__dirname, webpackTask.buildConfig.libFolder, 'index.js')
|
||||
},
|
||||
|
||||
output: {
|
||||
libraryTarget: 'umd',
|
||||
path: path.join(__dirname, webpackTask.buildConfig.distFolder),
|
||||
filename: `[name]${isProduction ? '.min' : ''}.js`
|
||||
},
|
||||
|
||||
// The typings are missing the "object" option here (https://webpack.js.org/configuration/externals/#object)
|
||||
externals: {
|
||||
react: {
|
||||
amd: 'react',
|
||||
commonjs: 'react'
|
||||
},
|
||||
'react-dom': {
|
||||
amd: 'react-dom',
|
||||
commonjs: 'react-dom'
|
||||
}
|
||||
} as any, // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
|
||||
plugins: [
|
||||
// new WebpackNotifierPlugin()
|
||||
]
|
||||
};
|
||||
|
||||
if (isProduction && webpackConfiguration.plugins) {
|
||||
webpackConfiguration.plugins.push(
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
mangle: true,
|
||||
compress: {
|
||||
dead_code: true,
|
||||
warnings: false
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
exports = webpackConfiguration;
|
|
@ -1,3 +1,6 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-node.json"
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-node.json",
|
||||
"compilerOptions": {
|
||||
"skipLibCheck": true
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-node.json"
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-node.json",
|
||||
"compilerOptions": {
|
||||
"skipLibCheck": true
|
||||
}
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче