mirror of
https://github.com/grafana/grafana.git
synced 2025-09-19 20:13:42 +08: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
@ -1,11 +1,11 @@
|
||||
'use strict';
|
||||
|
||||
const merge = require('webpack-merge');
|
||||
const { merge } = require('webpack-merge');
|
||||
const common = require('./webpack.common.js');
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const { DefinePlugin } = require('webpack');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const ESLintPlugin = require('eslint-webpack-plugin');
|
||||
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const getBabelConfig = require('./babel.config');
|
||||
@ -32,13 +32,11 @@ module.exports = (env = {}) =>
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: getBabelConfig({ BABEL_ENV: 'dev' }),
|
||||
},
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: getBabelConfig({ BABEL_ENV: 'dev' }),
|
||||
},
|
||||
],
|
||||
},
|
||||
require('./sass.rule.js')({
|
||||
sourceMap: false,
|
||||
@ -47,19 +45,25 @@ module.exports = (env = {}) =>
|
||||
],
|
||||
},
|
||||
|
||||
// https://webpack.js.org/guides/build-performance/#output-without-path-info
|
||||
output: {
|
||||
pathinfo: false,
|
||||
filename: '[name].js',
|
||||
},
|
||||
|
||||
// https://webpack.js.org/guides/build-performance/#avoid-extra-optimization-steps
|
||||
optimization: {
|
||||
runtimeChunk: true,
|
||||
removeAvailableModules: false,
|
||||
removeEmptyChunks: false,
|
||||
splitChunks: false,
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
env.noTsCheck
|
||||
? new webpack.DefinePlugin({}) // bogus plugin to satisfy webpack API
|
||||
parseInt(env.noTsCheck, 10)
|
||||
? new DefinePlugin({}) // bogus plugin to satisfy webpack API
|
||||
: new ForkTsCheckerWebpackPlugin({
|
||||
eslint: {
|
||||
enabled: true,
|
||||
files: ['public/app/**/*.{ts,tsx}', 'packages/*/src/**/*.{ts,tsx}'],
|
||||
options: {
|
||||
cache: true,
|
||||
},
|
||||
memoryLimit: 4096,
|
||||
},
|
||||
async: true, // don't block webpack emit
|
||||
typescript: {
|
||||
mode: 'write-references',
|
||||
memoryLimit: 4096,
|
||||
@ -69,8 +73,13 @@ module.exports = (env = {}) =>
|
||||
},
|
||||
},
|
||||
}),
|
||||
// next major version of ForkTsChecker is dropping support for ESLint
|
||||
new ESLintPlugin({
|
||||
lintDirtyModulesOnly: true, // don't lint on start, only lint changed files
|
||||
extensions: ['.ts', '.tsx'],
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'grafana.[name].[hash].css',
|
||||
filename: 'grafana.[name].[fullhash].css',
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: path.resolve(__dirname, '../../public/views/error.html'),
|
||||
@ -82,13 +91,12 @@ module.exports = (env = {}) =>
|
||||
new HtmlWebpackPlugin({
|
||||
filename: path.resolve(__dirname, '../../public/views/index.html'),
|
||||
template: path.resolve(__dirname, '../../public/views/index-template.html'),
|
||||
hash: true,
|
||||
inject: false,
|
||||
chunksSortMode: 'none',
|
||||
excludeChunks: ['dark', 'light'],
|
||||
}),
|
||||
new webpack.NamedModulesPlugin(),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
new DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify('development'),
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user