mirror of
https://github.com/grafana/grafana.git
synced 2026-08-11 13:44:59 -05:00
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>
This commit is contained in:
Jack Westbrook
co-authored by
Torkel Ödegaard
Torkel Ödegaard
parent
b40d48258d
commit
8d3b31ff23
@@ -2,7 +2,6 @@ const fs = require('fs-extra');
|
||||
const path = require('path');
|
||||
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const getBabelConfig = require('./babel.config');
|
||||
|
||||
class CopyUniconsPlugin {
|
||||
apply(compiler) {
|
||||
@@ -17,31 +16,15 @@ class CopyUniconsPlugin {
|
||||
}
|
||||
}
|
||||
|
||||
// https://github.com/visionmedia/debug/issues/701#issuecomment-505487361
|
||||
function shouldExclude(filename) {
|
||||
// There is external js code inside this which needs to be processed by babel.
|
||||
if (filename.indexOf(`jaeger-ui-components`) > 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const packagesToProcessbyBabel = ['debug', 'lru-cache', 'yallist', 'react-hook-form', 'rc-trigger'];
|
||||
for (const package of packagesToProcessbyBabel) {
|
||||
if (filename.indexOf(`node_modules/${package}`) > 0) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
console.log(path.resolve());
|
||||
module.exports = {
|
||||
target: 'web',
|
||||
entry: {
|
||||
app: './public/app/index.ts',
|
||||
},
|
||||
output: {
|
||||
clean: true,
|
||||
path: path.resolve(__dirname, '../../public/build'),
|
||||
filename: '[name].[hash].js',
|
||||
filename: '[name].[fullhash].js',
|
||||
// Keep publicPath relative for host.com/grafana/ deployments
|
||||
publicPath: 'public/build/',
|
||||
},
|
||||
@@ -64,15 +47,16 @@ module.exports = {
|
||||
// we need full path to root node_modules for grafana-enterprise symlink to work
|
||||
path.resolve('node_modules'),
|
||||
],
|
||||
fallback: {
|
||||
fs: false,
|
||||
stream: false,
|
||||
},
|
||||
},
|
||||
ignoreWarnings: [/export .* was not found in/],
|
||||
stats: {
|
||||
children: false,
|
||||
warningsFilter: /export .* was not found in/,
|
||||
source: false,
|
||||
},
|
||||
node: {
|
||||
fs: 'empty',
|
||||
},
|
||||
plugins: [
|
||||
new CopyUniconsPlugin(),
|
||||
new CopyWebpackPlugin({
|
||||
@@ -97,33 +81,12 @@ module.exports = {
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
/**
|
||||
* Some npm packages are bundled with es2015 syntax, ie. debug
|
||||
* To make them work with PhantomJS we need to transpile them
|
||||
* to get rid of unsupported syntax.
|
||||
*/
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: shouldExclude,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: getBabelConfig(),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: require.resolve('jquery'),
|
||||
use: [
|
||||
{
|
||||
loader: 'expose-loader',
|
||||
query: 'jQuery',
|
||||
},
|
||||
{
|
||||
loader: 'expose-loader',
|
||||
query: '$',
|
||||
},
|
||||
],
|
||||
loader: 'expose-loader',
|
||||
options: {
|
||||
exposes: ['$', 'jQuery'],
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
@@ -135,10 +98,11 @@ module.exports = {
|
||||
{
|
||||
loader: 'html-loader',
|
||||
options: {
|
||||
attrs: [],
|
||||
minimize: true,
|
||||
removeComments: false,
|
||||
collapseWhitespace: false,
|
||||
sources: false,
|
||||
minimize: {
|
||||
removeComments: false,
|
||||
collapseWhitespace: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -170,7 +134,7 @@ module.exports = {
|
||||
},
|
||||
// https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-3
|
||||
optimization: {
|
||||
moduleIds: 'hashed',
|
||||
moduleIds: 'named',
|
||||
runtimeChunk: 'single',
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
@@ -194,7 +158,7 @@ module.exports = {
|
||||
priority: 50,
|
||||
enforce: true,
|
||||
},
|
||||
vendors: {
|
||||
defaultVendors: {
|
||||
test: /[\\/]node_modules[\\/].*[jt]sx?$/,
|
||||
chunks: 'initial',
|
||||
priority: -10,
|
||||
|
||||
Reference in New Issue
Block a user