mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

MM-52536 Webpack unification part 1 (#23322)

Просмотр исходного кода 
* MM-52536 Update Webpack and use the same version for all products

* Switch Channels to use asset modules

* Remove unused module configuration from Boards/Playbooks

* Remove file-loader and html-loader

* Unify versions of CSS-related loaders

* Remove unused webpack-node-externals dependency

* Add missing MiniCssExtractPlugin to Boards/Playbooks production builds
Этот коммит содержится в:
Harrison Healey
2023-05-10 15:20:16 -04:00
коммит произвёл GitHub
родитель 8956f9399a
Коммит c35d738e04
12 изменённых файлов: 1541 добавлений и 2673 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

8
webapp/boards/package.json
Просмотреть файл

@@ -103,7 +103,6 @@
"@typescript-eslint/eslint-plugin": "5.57.1",
"@typescript-eslint/parser": "5.57.1",
"babel-eslint": "10.1.0",
"css-loader": "6.7.1",
"eslint-import-resolver-webpack": "0.13.2",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-eslint-comments": "3.2.0",
@@ -134,16 +133,11 @@
"jest-mock": "29.4.3",
"prettier": "^2.6.1",
"redux-mock-store": "^1.5.4",
"sass": "1.49.9",
"sass-loader": "12.6.0",
"start-server-and-test": "^1.14.0",
"style-loader": "3.3.1",
"stylelint": "^14.6.1",
"stylelint-config-sass-guidelines": "^9.0.1",
"ts-loader": "9.4.2",
"typescript": "4.6.2",
"webpack": "5.74.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.10.0"
"typescript": "4.6.2"
}
}

40
webapp/boards/webpack.config.js
Просмотреть файл

@@ -4,16 +4,22 @@
const exec = require('child_process').exec;
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const {ModuleFederationPlugin} = webpack.container;
const tsTransformer = require('@formatjs/ts-transformer');
const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
const targetIsRun = NPM_TARGET?.startsWith('start');
const targetIsDebug = NPM_TARGET?.startsWith('debug');
const DEV = targetIsRun || targetIsDebug;
let mode = 'production';
let devtool;
const plugins = [];
if (NPM_TARGET === 'debug' || NPM_TARGET === 'debug:watch' || NPM_TARGET === 'start:product') {
if (DEV) {
mode = 'development';
devtool = 'source-map';
plugins.push(
@@ -86,37 +92,26 @@ const config = {
exclude: [/node_modules/],
},
{
test: /\.html$/,
type: 'asset/resource',
test: /\.(css|scss)$/,
use: [
DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
],
},
{
test: /\.s[ac]ss$/i,
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
path.resolve(__dirname, 'loaders/globalScssClassLoader'),
],
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.(tsx?|js|jsx|mjs|html)$/,
use: [
],
exclude: [/node_modules/],
},
{
test: /\.(png|eot|tiff|svg|woff2|woff|ttf|jpg|gif)$/,
type: 'asset/resource',
generator: {
filename: '[name][ext]',
publicPath: undefined,
},
},
],
@@ -186,6 +181,11 @@ config.plugins.push(new webpack.DefinePlugin({
'process.env': env,
}));
config.plugins.push(new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[name].[contenthash].css',
}));
if (NPM_TARGET === 'start:product') {
const url = new URL(process.env.MM_BOARDS_DEV_SERVER_URL ?? 'http://localhost:9006');

12
webapp/channels/package.json
Просмотреть файл

@@ -15,8 +15,8 @@
"@mattermost/types": "*",
"@mui/base": "5.0.0-alpha.127",
"@mui/material": "5.11.16",
"@mui/system": "5.11.16",
"@mui/styled-engine-sc": "5.11.11",
"@mui/system": "5.11.16",
"@stripe/react-stripe-js": "1.13.0",
"@stripe/stripe-js": "1.41.0",
"@tippyjs/react": "4.2.6",
@@ -89,7 +89,6 @@
"redux-thunk": "2.4.2",
"regenerator-runtime": "0.13.10",
"rudder-sdk-js": "1.0.16",
"sass": "1.56.1",
"semver": "7.3.8",
"serialize-error": "8.0.1",
"shallow-equals": "1.0.0",
@@ -157,7 +156,6 @@
"babel-plugin-typescript-to-proptypes": "1.4.2",
"bundle-loader": "0.2.0",
"copy-webpack-plugin": "11.0.0",
"css-loader": "5.2.6",
"dotenv-webpack": "8.0.1",
"enzyme": "3.11.0",
"enzyme-adapter-react-17-updated": "1.0.2",
@@ -170,8 +168,6 @@
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"external-remotes-plugin": "1.0.0",
"file-loader": "6.2.0",
"html-loader": "2.1.2",
"html-webpack-plugin": "5.5.0",
"identity-obj-proxy": "3.0.0",
"image-webpack-loader": "8.1.0",
@@ -182,14 +178,12 @@
"jest-junit": "12.2.0",
"jest-styled-components": "7.1.1",
"jest-watch-typeahead": "0.6.4",
"mini-css-extract-plugin": "2.0.0",
"mmjstool": "github:mattermost/mattermost-utilities#237c2194aa646021535c54e4aafed084807b93a6",
"nock": "13.2.8",
"prettier": "2.3.2",
"react-router-enzyme-context": "1.2.0",
"redux-mock-store": "1.5.4",
"redux-persist-node-storage": "2.0.0",
"sass-loader": "13.2.0",
"style-loader": "3.0.0",
"stylelint": "13.13.1",
"stylelint-config-idiomatic-order": "8.1.0",
@@ -199,12 +193,8 @@
"stylelint-order": "4.1.0",
"stylelint-scss": "3.19.0",
"terser-webpack-plugin": "5.3.6",
"webpack": "5.74.0",
"webpack-bundle-analyzer": "4.7.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.11.1",
"webpack-livereload-plugin": "3.0.2",
"webpack-node-externals": "3.0.0",
"webpack-pwa-manifest": "4.3.0",
"yargs": "16.2.0",
"yup": "0.32.11"

5
webapp/channels/src/types/external/highlightjs.d.ts поставляемый
Просмотреть файл

@@ -63,3 +63,8 @@ declare module 'highlight.js/lib/languages/verilog.js';
declare module 'highlight.js/lib/languages/vhdl.js';
declare module 'highlight.js/lib/languages/xml.js';
declare module 'highlight.js/lib/languages/yaml.js';
declare module 'highlight.js/styles/*.css' {
const url: string;
export default url;
}

14
webapp/channels/src/utils/constants.tsx
Просмотреть файл

@@ -29,16 +29,10 @@ import {t} from 'utils/i18n';
import {CustomStatusDuration} from '@mattermost/types/users';
import githubCSS from '!!file-loader?name=files/code_themes/[hash].[ext]!highlight.js/styles/github.css';
// eslint-disable-line import/order
import monokaiCSS from '!!file-loader?name=files/code_themes/[hash].[ext]!highlight.js/styles/monokai.css';
// eslint-disable-line import/order
import solarizedDarkCSS from '!!file-loader?name=files/code_themes/[hash].[ext]!highlight.js/styles/base16/solarized-dark.css';
// eslint-disable-line import/order
import solarizedLightCSS from '!!file-loader?name=files/code_themes/[hash].[ext]!highlight.js/styles/base16/solarized-light.css'; // eslint-disable-line import/order
import githubCSS from 'highlight.js/styles/github.css';
import monokaiCSS from 'highlight.js/styles/monokai.css';
import solarizedDarkCSS from 'highlight.js/styles/base16/solarized-dark.css';
import solarizedLightCSS from 'highlight.js/styles/base16/solarized-light.css';
export const SettingsTypes = {
TYPE_TEXT: 'text',

6
webapp/channels/src/utils/utils.tsx
Просмотреть файл

@@ -640,12 +640,12 @@ function changeCss(className: string, classValue: string) {
}
}
function updateCodeTheme(userTheme: string) {
function updateCodeTheme(codeTheme: string) {
let cssPath = '';
Constants.THEME_ELEMENTS.forEach((element) => {
if (element.id === 'codeTheme') {
(element.themes as any).forEach((theme: Theme) => {
if (userTheme === theme.id) {
element.themes?.forEach((theme) => {
if (codeTheme === theme.id) {
cssPath = theme.cssURL!;
}
});

1
webapp/channels/tsconfig.json
Просмотреть файл

@@ -27,7 +27,6 @@
"mattermost-redux/*": ["packages/mattermost-redux/src/*"],
"reselect": ["packages/reselect/src"],
"@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"],
"!!file-loader*": ["utils/empty-string"],
}
},
"include": [

56
webapp/channels/webpack.config.js
Просмотреть файл

@@ -3,7 +3,6 @@
/* eslint-disable no-console, no-process-env */
const childProcess = require('child_process');
const path = require('path');
const url = require('url');
@@ -12,7 +11,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExternalTemplateRemotesPlugin = require('external-remotes-plugin');
const webpack = require('webpack');
const {ModuleFederationPlugin} = require('webpack').container;
const nodeExternals = require('webpack-node-externals');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
@@ -25,7 +23,6 @@ const packageJson = require('./package.json');
const NPM_TARGET = process.env.npm_lifecycle_event;
const targetIsRun = NPM_TARGET?.startsWith('run');
const targetIsTest = NPM_TARGET === 'test';
const targetIsStats = NPM_TARGET === 'stats';
const targetIsDevServer = NPM_TARGET?.startsWith('dev-server');
const targetIsEslint = NPM_TARGET === 'check' || NPM_TARGET === 'fix' || process.env.VSCODE_CWD;
@@ -55,11 +52,12 @@ if (DEV) {
const buildTimestamp = Date.now();
var config = {
entry: ['./src/root.tsx', './src/root.html'],
entry: ['./src/root.tsx'],
output: {
publicPath,
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
assetModuleFilename: 'files/[contenthash][ext]',
clean: true,
},
module: {
@@ -77,25 +75,29 @@ var config = {
},
},
{
type: 'javascript/auto',
test: /\.json$/,
include: [
path.resolve(__dirname, 'src/i18n'),
],
exclude: [/en\.json$/],
use: [
{
loader: 'file-loader?name=i18n/[name].[contenthash].[ext]',
},
],
type: 'asset/resource',
generator: {
filename: 'i18n/[name].[contenthash].json',
},
},
{
test: /\.(css|scss)$/,
exclude: /\/highlight\.js\//,
use: [
DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
],
},
{
test: /\.scss$/,
use: [
{
loader: 'sass-loader',
options: {
@@ -108,13 +110,8 @@ var config = {
},
{
test: /\.(png|eot|tiff|svg|woff2|woff|ttf|gif|mp3|jpg)$/,
type: 'asset/resource',
use: [
{
loader: 'file-loader',
options: {
name: 'files/[contenthash].[ext]',
},
},
{
loader: 'image-webpack-loader',
options: {},
@@ -123,25 +120,11 @@ var config = {
},
{
test: /\.apng$/,
use: [
{
loader: 'file-loader',
options: {
name: 'files/[contenthash].[ext]',
},
},
],
type: 'asset/resource',
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
sources: false,
},
},
],
test: /\/highlight\.js\/.*\.css$/,
type: 'asset/resource',
},
],
},
@@ -461,13 +444,6 @@ config.plugins.push(new webpack.DefinePlugin({
'process.env': env,
}));
// Test mode configuration
if (targetIsTest) {
config.entry = ['.src/root.tsx'];
config.target = 'node';
config.externals = [nodeExternals()];
}
if (targetIsDevServer) {
const proxyToServer = {
logLevel: 'silent',

4018
webapp/package-lock.json сгенерированный
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

10
webapp/package.json
Просмотреть файл

@@ -24,9 +24,17 @@
"chalk": "4.1.2",
"concurrently": "7.6.0",
"cross-env": "7.0.3",
"css-loader": "6.7.3",
"eslint": "8.37.0",
"eslint-plugin-formatjs": "4.9.1",
"strip-ansi": "6.0.1"
"mini-css-extract-plugin": "2.7.5",
"sass": "1.62.1",
"sass-loader": "13.2.2",
"strip-ansi": "6.0.1",
"style-loader": "3.3.2",
"webpack": "5.81.0",
"webpack-cli": "5.0.2",
"webpack-dev-server": "4.13.3"
},
"workspaces": [
"channels",

9
webapp/playbooks/package.json
Просмотреть файл

@@ -83,7 +83,6 @@
"babel-plugin-styled-components": "2.0.2",
"babel-plugin-typescript-to-proptypes": "2.0.0",
"classnames": "2.3.1",
"css-loader": "6.5.1",
"eslint-import-resolver-webpack": "0.13.2",
"eslint-plugin-import": "2.25.4",
"eslint-plugin-import-newlines": "1.3.0",
@@ -91,7 +90,6 @@
"eslint-plugin-react": "7.28.0",
"eslint-plugin-react-hooks": "4.3.0",
"eslint-plugin-unused-imports": "2.0.0",
"file-loader": "^6.2.0",
"identity-obj-proxy": "3.0.0",
"jest": "27.4.7",
"jest-canvas-mock": "2.3.1",
@@ -102,13 +100,8 @@
"react-test-renderer": "17.0.2",
"redux-mock-store": "1.5.4",
"redux-thunk": "2.4.1",
"sass": "1.46.0",
"sass-loader": "12.4.0",
"style-loader": "3.3.1",
"ts-prune": "0.10.3",
"webpack": "5.65.0",
"webpack-cli": "4.9.1",
"webpack-dev-server": "4.7.2"
"ts-prune": "0.10.3"
},
"scripts": {
"build": "webpack --mode=production --stats-error-details",

35
webapp/playbooks/webpack.config.js
Просмотреть файл

@@ -2,10 +2,16 @@
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const {ModuleFederationPlugin} = require('webpack').container;
const NPM_TARGET = process.env.npm_lifecycle_event;
const targetIsRun = NPM_TARGET?.startsWith('start');
const DEV = targetIsRun;
const TARGET_IS_PRODUCT = NPM_TARGET?.endsWith(':product');
const mode = 'production';
const devtool = 'source-map';
@@ -42,36 +48,24 @@ const config = {
},
},
{
test: /\.scss$/,
test: /\.(css|scss)$/,
use: [
'style-loader',
DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
test: /\.scss$/,
use: [
'sass-loader',
],
},
{
test: /\.(png|eot|tiff|svg|woff2|woff|ttf|gif|mp3|jpg|jpeg)$/,
type: 'asset/inline', // consider 'asset' when URL resource chunks are supported
},
{
test: /\.apng$/,
use: [
{
loader: 'file-loader',
options: {
name: 'files/[contenthash].[ext]',
},
},
],
},
],
},
devtool,
@@ -79,6 +73,11 @@ const config = {
plugins,
};
config.plugins.push(new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[name].[contenthash].css',
}));
// Set up module federation
function makeSingletonSharedModules(packageNames) {
const sharedObject = {};