From c7121997f35b9b3d548fd2c34efc30516d246b43 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Tue, 11 Jan 2022 12:57:07 +0300 Subject: [PATCH] Web: DocEditor: webpack.config.js is split into separate files --- web/ASC.Web.Editor/webpack.config.js | 130 ++---------------------- web/ASC.Web.Editor/webpack/common.js | 15 +++ web/ASC.Web.Editor/webpack/loaders.js | 97 ++++++++++++++++++ web/ASC.Web.Editor/webpack/plugins.js | 35 +++++++ web/ASC.Web.Editor/webpack/resolvers.js | 6 ++ 5 files changed, 160 insertions(+), 123 deletions(-) create mode 100644 web/ASC.Web.Editor/webpack/common.js create mode 100644 web/ASC.Web.Editor/webpack/loaders.js create mode 100644 web/ASC.Web.Editor/webpack/plugins.js create mode 100644 web/ASC.Web.Editor/webpack/resolvers.js diff --git a/web/ASC.Web.Editor/webpack.config.js b/web/ASC.Web.Editor/webpack.config.js index 6aea0d2575..1f0f7e94e4 100644 --- a/web/ASC.Web.Editor/webpack.config.js +++ b/web/ASC.Web.Editor/webpack.config.js @@ -1,9 +1,5 @@ -const { CleanWebpackPlugin } = require("clean-webpack-plugin"); -const CopyPlugin = require("copy-webpack-plugin"); -const HtmlWebpackPlugin = require("html-webpack-plugin"); const ModuleFederationPlugin = require("webpack").container .ModuleFederationPlugin; -const ExternalTemplateRemotesPlugin = require("external-remotes-plugin"); const TerserPlugin = require("terser-webpack-plugin"); const combineUrl = require("@appserver/common/utils/combineUrl"); const AppServerConfig = require("@appserver/common/constants/AppServerConfig"); @@ -15,11 +11,13 @@ const path = require("path"); const pkg = require("./package.json"); const deps = pkg.dependencies || {}; const homepage = pkg.homepage; // combineUrl(AppServerConfig.proxyURL, pkg.homepage); -const title = pkg.title; -const config = { +const { merge } = require("webpack-merge"); +const common = require("./webpack/common"); +const { client: clientLoaders } = require("./webpack/loaders"); + +const config = merge(common, { entry: "./src/index", - target: "web", mode: "development", devServer: { @@ -46,111 +44,16 @@ const config = { }, }, - resolve: { - extensions: [".jsx", ".js", ".json"], - fallback: { - crypto: false, - }, - }, - - output: { - publicPath: "auto", - chunkFilename: "static/js/[id].[contenthash].js", - //assetModuleFilename: "static/images/[hash][ext][query]", - path: path.resolve(process.cwd(), "dist"), - filename: "static/js/[name].[contenthash].bundle.js", - }, - performance: { maxEntrypointSize: 512000, maxAssetSize: 512000, }, module: { - rules: [ - { - test: /\.(png|jpe?g|gif|ico)$/i, - type: "asset/resource", - generator: { - filename: "static/images/[hash][ext][query]", - }, - }, - { - test: /\.m?js/, - type: "javascript/auto", - resolve: { - fullySpecified: false, - }, - }, - { - test: /\.react.svg$/, - use: [ - { - loader: "@svgr/webpack", - options: { - svgoConfig: { - plugins: [{ removeViewBox: false }], - }, - }, - }, - ], - }, - { test: /\.json$/, loader: "json-loader" }, - { - test: /\.css$/i, - use: ["style-loader", "css-loader"], - }, - { - test: /\.s[ac]ss$/i, - use: [ - // Creates `style` nodes from JS strings - "style-loader", - // Translates CSS into CommonJS - { - loader: "css-loader", - options: { - url: { - filter: (url, resourcePath) => { - // resourcePath - path to css file - - // Don't handle `/static` urls - if (url.startsWith("/static") || url.startsWith("data:")) { - return false; - } - - return true; - }, - }, - }, - }, - // Compiles Sass to CSS - "sass-loader", - ], - }, - - { - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: [ - { - loader: "babel-loader", - options: { - presets: ["@babel/preset-react", "@babel/preset-env"], - plugins: [ - "@babel/plugin-transform-runtime", - "@babel/plugin-proposal-class-properties", - "@babel/plugin-proposal-export-default-from", - ], - }, - }, - "source-map-loader", - ], - }, - ], + rules: clientLoaders, }, plugins: [ - new CleanWebpackPlugin(), new ModuleFederationPlugin({ name: "editor", filename: "remoteEntry.js", @@ -169,27 +72,8 @@ const config = { ...sharedDeps, }, }), - new ExternalTemplateRemotesPlugin(), - new HtmlWebpackPlugin({ - template: "./public/index.html", - publicPath: homepage, - title: title, - base: `${homepage}/`, - }), - new CopyPlugin({ - patterns: [ - { - from: "public", - globOptions: { - dot: true, - gitignore: true, - ignore: ["**/index.html"], - }, - }, - ], - }), ], -}; +}); module.exports = (env, argv) => { if (argv.mode === "production") { diff --git a/web/ASC.Web.Editor/webpack/common.js b/web/ASC.Web.Editor/webpack/common.js new file mode 100644 index 0000000000..01a6e7d111 --- /dev/null +++ b/web/ASC.Web.Editor/webpack/common.js @@ -0,0 +1,15 @@ +const resolvers = require("./resolvers"); +const path = require("path"); +const plugins = require("./plugins"); + +module.exports = { + target: "web", + output: { + path: path.resolve(process.cwd(), "dist"), + filename: "static/js/[name].[contenthash].bundle.js", + publicPath: "auto", + chunkFilename: "static/js/[id].[contenthash].js", + }, + resolve: { ...resolvers }, + plugins: [...plugins.client], +}; diff --git a/web/ASC.Web.Editor/webpack/loaders.js b/web/ASC.Web.Editor/webpack/loaders.js new file mode 100644 index 0000000000..bdd1bb7800 --- /dev/null +++ b/web/ASC.Web.Editor/webpack/loaders.js @@ -0,0 +1,97 @@ +const imageLoader = { + test: /\.(png|jpe?g|gif|ico)$/i, + type: "asset/resource", + generator: { + filename: "static/images/[hash][ext][query]", + }, +}; + +const mJsLoader = { + test: /\.m?js/, + type: "javascript/auto", + resolve: { + fullySpecified: false, + }, +}; + +const svgLoader = { + test: /\.react.svg$/, + use: [ + { + loader: "@svgr/webpack", + options: { + svgoConfig: { + plugins: [{ removeViewBox: false }], + }, + }, + }, + ], +}; + +const jsonLoader = { test: /\.json$/, loader: "json-loader" }; + +const cssLoader = { + test: /\.css$/i, + use: ["style-loader", "css-loader"], +}; + +const preprocessorStyleLoader = { + test: /\.s[ac]ss$/i, + use: [ + // Creates `style` nodes from JS strings + "style-loader", + // Translates CSS into CommonJS + { + loader: "css-loader", + options: { + url: { + filter: (url, resourcePath) => { + // resourcePath - path to css file + + // Don't handle `/static` urls + if (url.startsWith("/static") || url.startsWith("data:")) { + return false; + } + + return true; + }, + }, + }, + }, + // Compiles Sass to CSS + "sass-loader", + ], +}; + +const babelLoader = { + test: /\.(js|jsx)$/, + exclude: /node_modules/, + use: [ + { + loader: "babel-loader", + options: { + presets: ["@babel/preset-react", "@babel/preset-env"], + plugins: [ + "@babel/plugin-transform-runtime", + "@babel/plugin-proposal-class-properties", + "@babel/plugin-proposal-export-default-from", + ], + }, + }, + "source-map-loader", + ], +}; + +const client = [ + imageLoader, + mJsLoader, + svgLoader, + jsonLoader, + cssLoader, + preprocessorStyleLoader, + babelLoader, +]; + +module.exports = { + client, +}; diff --git a/web/ASC.Web.Editor/webpack/plugins.js b/web/ASC.Web.Editor/webpack/plugins.js new file mode 100644 index 0000000000..2f65bdf5ed --- /dev/null +++ b/web/ASC.Web.Editor/webpack/plugins.js @@ -0,0 +1,35 @@ +const { CleanWebpackPlugin } = require("clean-webpack-plugin"); +const ExternalTemplateRemotesPlugin = require("external-remotes-plugin"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const CopyPlugin = require("copy-webpack-plugin"); + +const pkg = require("../package.json"); +const homepage = pkg.homepage; // combineUrl(AppServerConfig.proxyURL, pkg.homepage); +const title = pkg.title; + +const client = [ + new CleanWebpackPlugin(), + new ExternalTemplateRemotesPlugin(), + new HtmlWebpackPlugin({ + template: "./public/index.html", + publicPath: homepage, + title: title, + base: `${homepage}/`, + }), + new CopyPlugin({ + patterns: [ + { + from: "public", + globOptions: { + dot: true, + gitignore: true, + ignore: ["**/index.html"], + }, + }, + ], + }), +]; + +module.exports = { + client, +}; diff --git a/web/ASC.Web.Editor/webpack/resolvers.js b/web/ASC.Web.Editor/webpack/resolvers.js new file mode 100644 index 0000000000..0649aa280b --- /dev/null +++ b/web/ASC.Web.Editor/webpack/resolvers.js @@ -0,0 +1,6 @@ +module.exports = { + extensions: [".jsx", ".js", ".json"], + fallback: { + crypto: false, + }, +};