Files
Jack Westbrook 8d3b31ff23 Build: Upgrade Webpack 5 (#36444)
* build(webpack): bump to v5 and successful yarn start compilation

* build(webpack): update postcss dependencies

* build(webpack): silence warnings about hash renamed to fullhash

* build(webpack): enable persistent cache to store generated webpack modules / chunks

* build(webpack): prefer eslintWebpackPlugin over tschecker so eslint doesn't block typechecking

* chore(yarn): run yarn-deduplicate to clean up dependencies

* chore(yarn): refresh lock file after clean install

* build(webpack): prefer output.clean over CleanWebpackPlugin

* build(webpack): prefer esbuild over babel-loader for dev config

* build(babel): turn off cache compression to improve build performance

* build(webpack): get production builds working

* build(webpack): remove phantomJS (removed from grafana in v7) specific loader

* build(webpack): put back babel for dev builds no performance gain in using esbuild in webpack

* build(webpack): prefer terser and optimise css plugins for prod. slower but smaller bundles

* build(webpack): clean up redundant code. inform postcss about node_modules

* build(webpack): remove deprecation warnings flag

* build(webpack): bump packages, dev performance optimisations, attempt to get hot working

* chore(storybook): use webpack 5 for dev and production builds

* build(storybook): speed up dev build

* chore(yarn): refresh lock file

* chore(webpack): bump webpack and related deps to latest

* refactor(webpack): put back inline-source-map, move start scripts out of grafana toolkit

* feat(webpack): prefer react-refresh over react-hot-loader

* build(webpack): update webpack.hot to use react-refresh

* chore: remove react-hot-loader from codebase

* refactor(queryeditorrow): fix circular dependency causing react-fast-refresh errors

* revert(webpack): remove stats.errorDetails from common config

* build(webpack): bump to v5 and successful yarn start compilation

* build(webpack): update postcss dependencies

* build(webpack): silence warnings about hash renamed to fullhash

* build(webpack): enable persistent cache to store generated webpack modules / chunks

* build(webpack): prefer eslintWebpackPlugin over tschecker so eslint doesn't block typechecking

* chore(yarn): run yarn-deduplicate to clean up dependencies

* chore(yarn): refresh lock file after clean install

* build(webpack): prefer output.clean over CleanWebpackPlugin

* build(webpack): prefer esbuild over babel-loader for dev config

* build(babel): turn off cache compression to improve build performance

* build(webpack): get production builds working

* build(webpack): remove phantomJS (removed from grafana in v7) specific loader

* build(webpack): put back babel for dev builds no performance gain in using esbuild in webpack

* build(webpack): prefer terser and optimise css plugins for prod. slower but smaller bundles

* build(webpack): clean up redundant code. inform postcss about node_modules

* build(webpack): remove deprecation warnings flag

* build(webpack): bump packages, dev performance optimisations, attempt to get hot working

* chore(storybook): use webpack 5 for dev and production builds

* build(storybook): speed up dev build

* chore(yarn): refresh lock file

* chore(webpack): bump webpack and related deps to latest

* refactor(webpack): put back inline-source-map, move start scripts out of grafana toolkit

* feat(webpack): prefer react-refresh over react-hot-loader

* build(webpack): update webpack.hot to use react-refresh

* chore: remove react-hot-loader from codebase

* refactor(queryeditorrow): fix circular dependency causing react-fast-refresh errors

* revert(webpack): remove stats.errorDetails from common config

* revert(webpack): remove include from babel-loader so symlinks (enterprise) work as before

* refactor(webpack): fix deprecation warnings in prod builds

* fix(storybook): fix failing builds due to replacing css-optimise webpack plugin

* fix(storybook): use raw-loader for svg icons

* build(webpack): fix dev script colors error

* chore(webpack): bump css-loader and react-refresh-webpack-plugin to latest versions

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2021-08-31 12:55:05 +02:00

102 lines
3.3 KiB
JavaScript

const loaderUtils = require('loader-utils');
const WebWorkerTemplatePlugin = require('webpack/lib/webworker/WebWorkerTemplatePlugin');
const ExternalsPlugin = require('webpack/lib/ExternalsPlugin');
const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
const COMPILATION_METADATA = Symbol('COMPILATION_METADATA');
module.exports.COMPILATION_METADATA = COMPILATION_METADATA;
module.exports.pitch = function pitch(remainingRequest) {
const { target, plugins = [], output, emit } = loaderUtils.getOptions(this) || {};
if (target !== 'worker') {
throw new Error(`Unsupported compile target: ${JSON.stringify(target)}`);
}
this.cacheable(false);
const { filename, options = {} } = getOutputFilename(output, { target });
// eslint-disable-next-line no-underscore-dangle
const currentCompilation = this._compilation;
const outputFilename = loaderUtils.interpolateName(this, filename, {
context: options.context || currentCompilation.options.context,
regExp: options.regExp,
});
const outputOptions = {
filename: outputFilename,
chunkFilename: `${outputFilename}.[id]`,
namedChunkFilename: null,
};
const compilerOptions = currentCompilation.compiler.options;
const childCompiler = currentCompilation.createChildCompiler('worker', outputOptions, [
// https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js
new WebWorkerTemplatePlugin(outputOptions),
new LoaderTargetPlugin('webworker'),
...(this.target === 'web' || this.target === 'webworker' ? [] : [new NodeTargetPlugin()]),
// https://github.com/webpack-contrib/worker-loader/issues/95#issuecomment-352856617
...(compilerOptions.externals ? [new ExternalsPlugin(compilerOptions.externals)] : []),
...plugins,
new SingleEntryPlugin(this.context, `!!${remainingRequest}`, 'main'),
]);
const subCache = `subcache ${__dirname} ${remainingRequest}`;
childCompiler.plugin('compilation', (compilation) => {
if (!compilation.cache) {
return;
}
if (!(subCache in compilation.cache)) {
Object.assign(compilation.cache, { [subCache]: {} });
}
Object.assign(compilation, { cache: compilation.cache[subCache] });
});
const callback = this.async();
childCompiler.runAsChild((error, entries, compilation) => {
if (error) {
return callback(error);
}
if (entries.length === 0) {
return callback(null, null);
}
const mainFilename = entries[0].files[0];
if (emit === false) {
delete currentCompilation.assets[mainFilename];
}
callback(null, compilation.assets[mainFilename].source(), null, {
[COMPILATION_METADATA]: entries[0].files,
});
});
};
function getOutputFilename(options, { target }) {
if (!options) {
return { filename: `[fullhash].${target}.js`, options: undefined };
}
if (typeof options === 'string') {
return { filename: options, options: undefined };
}
if (typeof options === 'object') {
return {
filename: options.filename,
options: {
context: options.context,
regExp: options.regExp,
},
};
}
throw new Error(`Invalid compile output options: ${options}`);
}