From cdb202d8ba16323f83448dfed0fc70d7d8e1cd4d Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Thu, 12 Jan 2023 20:46:35 +0100 Subject: [PATCH] tooling(webpack): move webpack to its own folder (#6076) --- .webpack/webpack.common.js | 176 ++++++++++++++++++ .../webpack.coverage.js | 17 +- webpack.dev.js => .webpack/webpack.dev.js | 30 +-- webpack.prod.js => .webpack/webpack.prod.js | 14 +- karma.conf.js | 32 ++-- package.json | 12 +- webpack.common.js | 160 ---------------- 7 files changed, 231 insertions(+), 210 deletions(-) create mode 100644 .webpack/webpack.common.js rename webpack.coverage.js => .webpack/webpack.coverage.js (63%) rename webpack.dev.js => .webpack/webpack.dev.js (60%) rename webpack.prod.js => .webpack/webpack.prod.js (54%) delete mode 100644 webpack.common.js diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js new file mode 100644 index 0000000000..06d9e3391c --- /dev/null +++ b/.webpack/webpack.common.js @@ -0,0 +1,176 @@ +/* global __dirname module */ + +/* +This is the OpenMCT common webpack file. It is imported by the other three webpack configurations: + - webpack.prod.js - the production configuration for OpenMCT (default) + - webpack.dev.js - the development configuration for OpenMCT + - webpack.coverage.js - imports webpack.dev.js and adds code coverage +There are separate npm scripts to use these configurations, though simply running `npm install` +will use the default production configuration. +*/ +const path = require("path"); +const packageDefinition = require("../package.json"); +const CopyWebpackPlugin = require("copy-webpack-plugin"); +const webpack = require("webpack"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); + +const { VueLoaderPlugin } = require("vue-loader"); +let gitRevision = "error-retrieving-revision"; +let gitBranch = "error-retrieving-branch"; + +try { + gitRevision = require("child_process") + .execSync("git rev-parse HEAD") + .toString() + .trim(); + gitBranch = require("child_process") + .execSync("git rev-parse --abbrev-ref HEAD") + .toString() + .trim(); +} catch (err) { + console.warn(err); +} + +/** @type {import('webpack').Configuration} */ +const config = { + context: path.join(__dirname, ".."), + entry: { + openmct: "./openmct.js", + generatorWorker: "./example/generator/generatorWorker.js", + couchDBChangesFeed: + "./src/plugins/persistence/couch/CouchChangesFeed.js", + inMemorySearchWorker: "./src/api/objects/InMemorySearchWorker.js", + espressoTheme: "./src/plugins/themes/espresso-theme.scss", + snowTheme: "./src/plugins/themes/snow-theme.scss" + }, + output: { + globalObject: "this", + filename: "[name].js", + path: path.resolve(__dirname, "..", "dist"), + library: "openmct", + libraryTarget: "umd", + publicPath: "", + hashFunction: "xxhash64", + clean: true + }, + resolve: { + alias: { + "@": path.join(__dirname, "..", "src"), + legacyRegistry: path.join(__dirname, "..", "src/legacyRegistry"), + saveAs: "file-saver/src/FileSaver.js", + csv: "comma-separated-values", + EventEmitter: "eventemitter3", + bourbon: "bourbon.scss", + "plotly-basic": "plotly.js-basic-dist", + "plotly-gl2d": "plotly.js-gl2d-dist", + "d3-scale": path.join( + __dirname, + "..", + "node_modules/d3-scale/dist/d3-scale.min.js" + ), + printj: path.join( + __dirname, + "..", + "node_modules/printj/dist/printj.min.js" + ), + styles: path.join(__dirname, "..", "src/styles"), + MCT: path.join(__dirname, "..", "src/MCT"), + testUtils: path.join(__dirname, "..", "src/utils/testUtils.js"), + objectUtils: path.join( + __dirname, + "..", + "src/api/objects/object-utils.js" + ), + utils: path.join(__dirname, "..", "src/utils") + } + }, + plugins: [ + new webpack.DefinePlugin({ + __OPENMCT_VERSION__: `'${packageDefinition.version}'`, + __OPENMCT_BUILD_DATE__: `'${new Date()}'`, + __OPENMCT_REVISION__: `'${gitRevision}'`, + __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'` + }), + new VueLoaderPlugin(), + new CopyWebpackPlugin({ + patterns: [ + { + from: "src/images/favicons", + to: "favicons" + }, + { + from: "./index.html", + transform: function (content) { + return content.toString().replace(/dist\//g, ""); + } + }, + { + from: "src/plugins/imagery/layers", + to: "imagery" + } + ] + }), + new MiniCssExtractPlugin({ + filename: "[name].css", + chunkFilename: "[name].css" + }) + ], + module: { + rules: [ + { + test: /\.(sc|sa|c)ss$/, + use: [ + MiniCssExtractPlugin.loader, + { + loader: "css-loader" + }, + { + loader: "resolve-url-loader" + }, + { + loader: "sass-loader", + options: { sourceMap: true } + } + ] + }, + { + test: /\.vue$/, + use: "vue-loader" + }, + { + test: /\.html$/, + type: "asset/source" + }, + { + test: /\.(jpg|jpeg|png|svg)$/, + type: "asset/resource", + generator: { + filename: "images/[name][ext]" + } + }, + { + test: /\.ico$/, + type: "asset/resource", + generator: { + filename: "icons/[name][ext]" + } + }, + { + test: /\.(woff|woff2?|eot|ttf)$/, + type: "asset/resource", + generator: { + filename: "fonts/[name][ext]" + } + } + ] + }, + stats: "errors-warnings", + performance: { + // We should eventually consider chunking to decrease + // these values + maxEntrypointSize: 25000000, + maxAssetSize: 25000000 + } +}; + +module.exports = config; diff --git a/webpack.coverage.js b/.webpack/webpack.coverage.js similarity index 63% rename from webpack.coverage.js rename to .webpack/webpack.coverage.js index 3b96de59ce..b693ff6b18 100644 --- a/webpack.coverage.js +++ b/.webpack/webpack.coverage.js @@ -6,9 +6,9 @@ OpenMCT Continuous Integration servers use this configuration to add code covera information to pull requests. */ -const config = require('./webpack.dev'); +const config = require("./webpack.dev"); // eslint-disable-next-line no-undef -const CI = process.env.CI === 'true'; +const CI = process.env.CI === "true"; config.devtool = CI ? false : undefined; @@ -18,13 +18,18 @@ config.module.rules.push({ test: /\.js$/, exclude: /(Spec\.js$)|(node_modules)/, use: { - loader: 'babel-loader', + loader: "babel-loader", options: { retainLines: true, // eslint-disable-next-line no-undef - plugins: [['babel-plugin-istanbul', { - extension: ['.js', '.vue'] - }]] + plugins: [ + [ + "babel-plugin-istanbul", + { + extension: [".js", ".vue"] + } + ] + ] } } }); diff --git a/webpack.dev.js b/.webpack/webpack.dev.js similarity index 60% rename from webpack.dev.js rename to .webpack/webpack.dev.js index 9dd738a3a3..59ee5642f1 100644 --- a/webpack.dev.js +++ b/.webpack/webpack.dev.js @@ -5,28 +5,28 @@ This configuration should be used for development purposes. It contains full sou devServer (which be invoked using by `npm start`), and a non-minified Vue.js distribution. If OpenMCT is to be used for a production server, use webpack.prod.js instead. */ -const { merge } = require('webpack-merge'); -const common = require('./webpack.common'); +const { merge } = require("webpack-merge"); +const common = require("./webpack.common"); -const path = require('path'); -const webpack = require('webpack'); +const path = require("path"); +const webpack = require("webpack"); module.exports = merge(common, { - mode: 'development', + mode: "development", watchOptions: { // Since we use require.context, webpack is watching the entire directory. // We need to exclude any files we don't want webpack to watch. // See: https://webpack.js.org/configuration/watch/#watchoptions-exclude ignored: [ - '**/{node_modules,dist,docs,e2e}', // All files in node_modules, dist, docs, e2e, - '**/{*.yml,Procfile,webpack*.js,babel*.js,package*.json,tsconfig.json}', // Config files - '**/*.{sh,md,png,ttf,woff,svg}', // Non source files - '**/.*' // dotfiles and dotfolders + "**/{node_modules,dist,docs,e2e}", // All files in node_modules, dist, docs, e2e, + "**/{*.yml,Procfile,webpack*.js,babel*.js,package*.json,tsconfig.json}", // Config files + "**/*.{sh,md,png,ttf,woff,svg}", // Non source files + "**/.*" // dotfiles and dotfolders ] }, resolve: { alias: { - "vue": path.join(__dirname, "node_modules/vue/dist/vue.js") + vue: path.join(__dirname, "..", "node_modules/vue/dist/vue.js") } }, plugins: [ @@ -34,20 +34,20 @@ module.exports = merge(common, { __OPENMCT_ROOT_RELATIVE__: '"dist/"' }) ], - devtool: 'eval-source-map', + devtool: "eval-source-map", devServer: { devMiddleware: { writeToDisk: (filePathString) => { const filePath = path.parse(filePathString); - const shouldWrite = !(filePath.base.includes('hot-update')); + const shouldWrite = !filePath.base.includes("hot-update"); return shouldWrite; } }, - watchFiles: ['**/*.css'], + watchFiles: ["**/*.css"], static: { - directory: path.join(__dirname, '/dist'), - publicPath: '/dist', + directory: path.join(__dirname, "..", "/dist"), + publicPath: "/dist", watch: false }, client: { diff --git a/webpack.prod.js b/.webpack/webpack.prod.js similarity index 54% rename from webpack.prod.js rename to .webpack/webpack.prod.js index 458821ee36..4863d627db 100644 --- a/webpack.prod.js +++ b/.webpack/webpack.prod.js @@ -4,17 +4,17 @@ This configuration should be used for production installs. It is the default webpack configuration. */ -const { merge } = require('webpack-merge'); -const common = require('./webpack.common'); +const { merge } = require("webpack-merge"); +const common = require("./webpack.common"); -const path = require('path'); -const webpack = require('webpack'); +const path = require("path"); +const webpack = require("webpack"); module.exports = merge(common, { - mode: 'production', + mode: "production", resolve: { alias: { - "vue": path.join(__dirname, "node_modules/vue/dist/vue.min.js") + vue: path.join(__dirname, "..", "node_modules/vue/dist/vue.min.js") } }, plugins: [ @@ -22,5 +22,5 @@ module.exports = merge(common, { __OPENMCT_ROOT_RELATIVE__: '""' }) ], - devtool: 'source-map' + devtool: "source-map" }); diff --git a/karma.conf.js b/karma.conf.js index 75a9c04fc5..9352d41f5e 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -28,12 +28,12 @@ module.exports = (config) => { let singleRun; if (process.env.KARMA_DEBUG) { - webpackConfig = require('./webpack.dev.js'); - browsers = ['ChromeDebugging']; + webpackConfig = require("./.webpack/webpack.dev.js"); + browsers = ["ChromeDebugging"]; singleRun = false; } else { - webpackConfig = require('./webpack.coverage.js'); - browsers = ['ChromeHeadless']; + webpackConfig = require("./.webpack/webpack.coverage.js"); + browsers = ["ChromeHeadless"]; singleRun = true; } @@ -42,28 +42,28 @@ module.exports = (config) => { delete webpackConfig.entry; config.set({ - basePath: '', - frameworks: ['jasmine', 'webpack'], + basePath: "", + frameworks: ["jasmine", "webpack"], files: [ - 'indexTest.js', + "indexTest.js", // included means: should the files be included in the browser using