Dremio Webpack Configuration

//n * Copyright (C) 2017-2019 Dremio Corporation/n /n * Licensed under the Apache License, Version 2.0 (the 'License');/n * you may not use this file except in compliance with the License./n * You may obtain a copy of the License at/n /n * http://www.apache.org/licenses/LICENSE-2.0/n /n * Unless required by applicable law or agreed to in writing, software/n * distributed under the License is distributed on an 'AS IS' BASIS,/n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied./n * See the License for the specific language governing permissions and/n * limitations under the License./n //n//@ts-nocheck/nimport path from 'path';/nimport webpack from 'webpack';/nimport HtmlWebpackPlugin from 'html-webpack-plugin';/nimport CopyWebpackPlugin from 'copy-webpack-plugin';/nimport HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin';/nimport SentryCliPlugin from '@sentry/webpack-plugin';/nimport MiniCssExtractPlugin from 'mini-css-extract-plugin';/nimport CssMinimizerPlugin from 'css-minimizer-webpack-plugin';/nimport TerserPlugin from 'terser-webpack-plugin';/nimport { getVersion, getEdition } from './scripts/versionUtils';/nimport dynLoader from './dynLoader';/nimport { injectionPath, InjectionResolver } from './scripts/injectionResolver';/nimport { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';/nimport * as env from 'env-var';/n/ndynLoader.applyNodeModulesResolver();/n/nconst DEV_DCS_TARGET = env/n .get('DEV_DCS_TARGET')/n .default('https://app.dev.dremio.site')/n .asString();/nconst DEV_NESSIE_TARGET = env/n .get('DEV_NESSIE_TARGET')/n .default(DEV_DCS_TARGET.replace('app.', 'nessie.'))/n .asString();/nconst DEV_NESSIE_TARGET_PREFIX = env/n .get('DEV_NESSIE_TARGET_PREFIX')/n .default('true')/n .asBool();/nconst DEV_APP_TARGET = env/n .get('DEV_APP_TARGET')/n .default('http://automaster:9047')/n .asString();/n/nconst enableBundleAnalyzer = process.env.ENABLE_BUNDLE_ANALYZER === 'true';/nconst isProductionBuild = process.env.NODE_ENV === 'production';/nconst isBeta = process.env.DREMIO_BETA === 'true';/nconst skipSourceMapUpload = process.env.SKIP_SENTRY_STEP === 'true';/nconst dremioVersion = getVersion();/nconst devtool = isProductionBuild ? 'hidden-source-map' : 'eval-source-map'; // chris says: '#cheap-eval-source-map' is really great for debugging/nconst isStaticDremioConfig = process.env.STATIC_DREMIO_CONFIG === 'true';/nconst stripComments = process.env.DREMIO_STRIP_COMMENTS === 'true';/n/nconst dcsPath = process.env.DREMIO_DCS_LOADER_PATH/n ? path.resolve(dirname, process.env.DREMIO_DCS_LOADER_PATH)/n : null;/n/nconst indexFilename = process.env.INDEX_FILENAME || 'index.html';/n/nlet outputPath = path.join(dirname, 'build');/nconst pathArg = '--output-path=';/n//output path may be overwritten by passing a command line argument/nfor (const param of process.argv) {/n if (param.toLowerCase().startsWith(pathArg)) {/n outputPath = param.substr(pathArg.length);/n }/n}/n/nconst babelOptions = {/n configFile: path.resolve(dirname, '.babelrc.js'),/n};/n/nconst getDremioConfig = () => {/n let config = isProductionBuild ? /'JSON.parse('${dremio?js_string}')/' : /'null/';/n/n if (isProductionBuild && isStaticDremioConfig) {/n config = JSON.stringify({ edition: getEdition() });/n }/n return config;/n};/n/nconst babelLoader = {/n loader: 'babel-loader',/n options: {/n ...babelOptions,/n cacheDirectory: true,/n },/n};/n/nconst getStyleLoader = (isCss) => {/n const otherLoaders = [!isCss && 'less-loader'].filter(Boolean);/n return {/n test: isCss ? //.css$/ : //.less$/,/n use: [/n {/n loader: MiniCssExtractPlugin.loader,/n },/n // 将 JS 字符串生成为 style 节点/n// 'style-loader',/n {/n loader: 'css-loader',/n options: {/n modules: !isCss && {/n mode: 'local',/n localIdentName: '[name][local][hash:base64:5]',/n exportLocalsConvention: 'camelCase',/n },/n importLoaders: otherLoaders.length,/n },/n },/n ...otherLoaders,/n ],/n };/n};/n/nconst injectionPathAsList = injectionPath ? [injectionPath] : [];/nconst dcsPathAsList = dcsPath ? [dcsPath] : [];/n/nconst rules = [/n// { //removed this rule because we already have a rule for scss/n// test: //.less$/,/n// use: [/n// 'style-loader',/n// 'css-loader',/n// 'less-loader'/n// ]/n// },/n { // added this rule to support scss/n test: //.s[ac]ss$/,/n use: [/n // 将 JS 字符串生成为 style 节点/n// 'style-loader',/n // 将 CSS 转化成 CommonJS 模块/n 'css-loader',/n {/n loader: 'sass-loader',/n options: {/n modules: {/n mode: 'local',/n localIdentName: '[name][local]__[hash:base64:5]',/n exportLocalsConvention: 'camelCase',/n },/n importLoaders: 0,/n },/n },/n ]/n },/n// getStyleLoader(false),/n { // less loader/n test://.less$/,/n use: [/n {/n loader: MiniCssExtractPlugin.loader,/n },/n 'css-loader',/n// 'resolve-url-loader',/n 'less-loader'/n ],/n },/n getStyleLoader(true),/n { // svg loader/n test: /art//./.svg$/,/n use: [/n babelLoader,/n {/n loader: 'react-svg-loader',/n options: {/n svgo: {/n plugins: [{ removeDimensions: true }, { convertPathData: false }], // disable convertPathData pending https://github.com/svg/svgo/issues/863/n },/n },/n },/n ],/n },/n { // pattern loader/n test: //.pattern$/,/n use: {/n loader: 'glob-loader',/n },/n },/n { // png loader/n test: //.png$/,/n type: 'asset/resource',/n },/n { // legacy svg loader/n test: /(components|pages)//./.svg(/?.)?$/,/n type: 'asset/resource',/n },/n { // legacy svg loader/n test: /(ui-lib)//./.svg(/?.)?$/,/n type: 'asset/resource',/n },/n { // font loader/n test: //.(woff(2)?|ttf|eot|gif)(/?.)?$/,/n type: 'asset/resource',/n },/n];/n/nconst outFilenameJsTemplate = 'static/js/[name].[contenthash:8].js';/nconst outFilenameJsChunkTemplate = 'static/js/[name].[contenthash:8].chunk.js';/nconst outFilenameCssTemplate = 'static/css/[name].[contenthash:8].css';/n/nconst config = {/n mode: isProductionBuild ? 'production' : 'development',/n entry: {/n app: [path.resolve(__dirname, 'src/index.js')],/n },/n devServer: {/n compress: true,/n historyApiFallback: true,/n hot: true,/n port: 3005,/n proxy: {/n headers: { Connection: 'keep-alive' },/n '/api': {/n target: DEV_APP_TARGET,/n changeOrigin: true,/n ws: true,/n },/n '/nessie-proxy/v2': {/n target: DEV_APP_TARGET,/n changeOrigin: true,/n },/n '/nessieV1': {/n target: DEV_NESSIE_TARGET,/n changeOrigin: true,/n pathRewrite: { '^/nessieV1/': DEV_NESSIE_TARGET_PREFIX ? '/v1/' : '/' },/n },/n '/nessie': {/n target: DEV_NESSIE_TARGET,/n changeOrigin: true,/n pathRewrite: { '^/nessie/': DEV_NESSIE_TARGET_PREFIX ? '/v2/' : '/' },/n },/n '/support': {/n target: DEV_DCS_TARGET.replace('app.', 'support.'),/n changeOrigin: true,/n },/n '/ui': {/n target: DEV_DCS_TARGET,/n changeOrigin: true,/n },/n '/v0': {/n target: DEV_DCS_TARGET.replace('app.', 'api.'),/n changeOrigin: true,/n },/n },/n static: {/n directory: './public',/n },/n },/n output: {/n publicPath: '/',/n path: outputPath,/n filename: outFilenameJsTemplate,/n chunkFilename: outFilenameJsChunkTemplate,/n sourceMapFilename: 'sourcemaps/[file].map',/n assetModuleFilename: 'static/media/[name].[hash][ext]',/n },/n stats: {/n assets: false,/n children: false,/n chunks: false,/n entrypoints: true,/n logging: 'warn',/n modules: false,/n },/n performance: {/n maxEntrypointSize: 10000000,/n maxAssetSize: 10000000,/n },/n module: {/n rules,/n },/n devtool,/n plugins: [/n new webpack.ProvidePlugin({/n process: 'process/browser',/n }),/n enableBundleAnalyzer && new BundleAnalyzerPlugin(),/n new MiniCssExtractPlugin({/n // Options similar to the same options in webpackOptions.output/n // all options are optional/n filename: outFilenameCssTemplate,/n chunkFilename: outFilenameCssTemplate,/n ignoreOrder: false, // Enable to remove warnings about conflicting order/n }),/n new webpack.BannerPlugin(require(dynLoader.path + '/webpackBanner')),/n new HtmlWebpackPlugin({/n dremioConfig: getDremioConfig(),/n template: './src/index.html',/n filename: indexFilename,/n cache: false, // make sure rebuilds kick BuildInfo too/n files: {/n css: [outFilenameCssTemplate],/n js: [outFilenameJsTemplate],/n },/n minify: {/n removeComments: stripComments,/n },/n }),/n new HtmlWebpackTagsPlugin({/n tags: ['static/js/jsPlumb-2.1.4-min.js'],/n }),/n // 'process.env.NODE_ENV' does not work, despite the fact that it is a recommended way, according/n // to documentation (see https://webpack.js.org/plugins/define-plugin/)/n new webpack.DefinePlugin({/n // todo/n // copy some variables that are required by UI code/n 'process.env': [/n 'DREMIO_RELEASE',/n 'DREMIO_VERSION',/n 'EDITION_TYPE',/n 'SKIP_SENTRY_STEP',/n 'DCS_V2_URL',/n 'DCS_V3_URL',/n 'DREMIO_BETA',/n 'ENABLE_MSW',/n ].reduce(/n (resultObj, variableToCopy) => {/n resultObj[variableToCopy] = JSON.stringify(/n process.env[variableToCopy]/n );/n return resultObj;/n },/n {/n // This is for React: https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build/n // and some other utility methods/n // You probably want utils/config instead./n NODE_ENV: JSON.stringify(/n isProductionBuild ? 'production' : 'development'/n ),/n }/n ),/n }),/n new CopyWebpackPlugin({/n patterns: [/n {/n from: node_modules/monaco-editor/${isProductionBuild ? 'min' : 'dev'}/vs,/n to: 'vs',/n },/n {/n from: 'public',/n },/n getEdition() === 'ee' && {/n from: path.join(process.env.DREMIO_DYN_LOADER_PATH, '../public'),/n },/n {/n from: 'node_modules/jsplumb/dist/js/jsPlumb-2.1.4-min.js',/n to: 'static/js',/n },/n {/n from: node_modules/dremio-ui-lib/icons,/n to: 'static/icons',/n },/n {/n from: node_modules/dremio-ui-lib/images,/n to: 'static/images',/n },/n process.env.ENABLE_MSW === 'true' && {/n from: 'src/mockServiceWorker.js',/n to: 'mockServiceWorker.js',/n },/n ].filter(Boolean),/n }),/n !skipSourceMapUpload &&/n new SentryCliPlugin({/n release: dremioVersion,/n include: outputPath,/n ignore: [/n 'vs', // ignore monaco editor sources/n '**/.css.map',/n ],/n configFile: path.resolve(__dirname, '.sentryclirc'),/n rewrite: true,/n }),/n ].filter(Boolean),/n optimization: {/n moduleIds: 'deterministic',/n runtimeChunk: 'single',/n splitChunks: {/n cacheGroups: {/n vendor: {/n test: /node_modules/, // 优化: 将 vendor 的 test 改为使用正则表达式匹配 node_modules 文件夹/n chunks: 'initial',/n name: 'vendor',/n enforce: true,/n },/n },/n },/n minimizer: [new TerserPlugin(), new CssMinimizerPlugin()], // 优化: 使用 minimizer 数组来包含 TerserPlugin 和 CssMinimizerPlugin/n },/n resolve: {/n extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],/n modules: [/n path.resolve(__dirname, 'src'),/n 'node_modules',/n path.resolve(__dirname, 'node_modules'), // TODO: this is ugly, needed to resolve module dependencies outside of src/ so they can find our main node_modules/n ],/n // Webpack v4 previously supplied all of these Node polyfills, now we need to include/n // them manually./n fallback: {/n path: require.resolve('path-browserify'),/n assert: require.resolve('assert'),/n },/n alias: {/n ...(dcsPath/n ? {/n '@dcs': dcsPath,/n }/n : {}),/n 'dyn-load': dynLoader.path, // ref for std code to ref dynamic componentsd/n '@app': path.resolve(__dirname, 'src'),/n '@root': path.resolve(__dirname),/n 'Narwhal-Logo-With-Name-Light': path.resolve(/n isBeta/n ? './src/components/Icon/icons/Narwhal-Logo-With-Name-Light-Beta.svg'/n : './src/components/Icon/icons/Narwhal-Logo-With-Name-Light.svg'/n ),/n // Todo: Below lines are to fix the issue with 2 instances of react because of lib. Find a better fix for this. https://github.com/facebook/react/issues/13991/n react: path.resolve(__dirname, 'node_modules/react'),/n '@mui': path.resolve(__dirname, 'node_modules/@mui'),/n 'leantable/react': path.resolve(/n __dirname,/n 'node_modules/leantable/dist-cjs/react'/n ),/n },/n plugins: [new InjectionResolver()],/n },/n};/n/nexport default config;/n