fix(ui): make a more deterministic build (#15820)

influxdata · Nov 11, 2019 · a1cecbf · a1cecbf
1 parent 7421836
commit a1cecbf
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 94 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -20,7 +20,7 @@
     "start:docker": "yarn generate && yarn build:vendor && yarn run start:dev",
     "start:dev": "webpack-dev-server --config ./webpack.dev.ts",
     "build": "yarn install --silent && yarn build:ci",
-    "build:ci": "yarn generate && webpack --config webpack.prod.ts",
+    "build:ci": "yarn generate && yarn build:vendor && webpack --config webpack.prod.ts",
     "build:vendor": "webpack --config webpack.vendor.ts",
     "clean": "rm -rf ./build && rm -rf ./.cache && rm -rf node_modules && rm -rf cypress/screenshots && rm -rf cypress/videos && rm -f junit-results/* ",
     "test": "jest --maxWorkers=2",
@@ -113,7 +113,7 @@
     "sass-loader": "^7.1.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.3.0",
+    "terser-webpack-plugin": "2.2.1",
     "ts-jest": "^24.0.0",
     "ts-loader": "^5.3.3",
     "ts-node": "^8.3.0",

diff --git a/ui/src/me/components/GettingStarted.scss b/ui/src/me/components/GettingStarted.scss
@@ -29,7 +29,6 @@
 }
 
 .getting-started--card {
-  position: absolute;
   width: 100%;
   height: 100%;
   border: $ix-border solid $g4-onyx;
@@ -88,4 +87,4 @@
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 320px;
   }
-}
+}
diff --git a/ui/webpack.common.ts b/ui/webpack.common.ts
@@ -1,5 +1,7 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const {CleanWebpackPlugin} = require('clean-webpack-plugin')
 const webpack = require('webpack')
 const {
@@ -44,6 +46,20 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.s?css$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+              hmr: true,
+            },
+          },
+        ],
+      },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [{
@@ -83,6 +99,15 @@ module.exports = {
       header: process.env.INJECT_HEADER || '',
       body: process.env.INJECT_BODY || '',
     }),
+    new MiniCssExtractPlugin({
+      filename: `${STATIC_DIRECTORY}[contenthash:10].css`,
+      chunkFilename: `${STATIC_DIRECTORY}[id].[contenthash:10].css`,
+    }),
+    new webpack.DllReferencePlugin({
+      context: path.join(__dirname, 'build'),
+      manifest: require('./build/vendor-manifest.json'),
+    }),
+    new ForkTsCheckerWebpackPlugin(),
     new webpack.ProgressPlugin(),
     new webpack.DefinePlugin({
       ENABLE_MONACO: JSON.stringify(false)

diff --git a/ui/webpack.dev.ts b/ui/webpack.dev.ts
@@ -1,9 +1,6 @@
 export {}
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const merge = require('webpack-merge')
-const webpack = require('webpack')
 const common = require('./webpack.common.ts')
-const path = require('path')
 const PORT = parseInt(process.env.PORT, 10) || 8080
 const PUBLIC = process.env.PUBLIC || undefined
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -27,30 +24,7 @@ module.exports = merge(common, {
     port: PORT,
     public: PUBLIC,
   },
-  module: {
-    rules: [
-      {
-        test: /\.s?css$/i,
-        use: [
-          'style-loader',
-          'css-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              implementation: require('sass'),
-              hmr: true,
-            },
-          },
-        ],
-      },
-    ],
-  },
   plugins: [
-    new webpack.DllReferencePlugin({
-      context: path.join(__dirname, 'build'),
-      manifest: require('./build/vendor-manifest.json'),
-    }),
-    new ForkTsCheckerWebpackPlugin(),
     new BundleAnalyzerPlugin({
       analyzerMode: 'server',
       analyzerHost: '0.0.0.0',

diff --git a/ui/webpack.prod.ts b/ui/webpack.prod.ts
@@ -6,8 +6,6 @@ const merge = require('webpack-merge')
 const path = require('path')
 
 // Plugins
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const TerserJSPlugin = require('terser-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -22,20 +20,6 @@ module.exports = merge(common, {
   },
   module: {
     rules: [
-      {
-        test: /\.s?css$/i,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              implementation: require('sass'),
-              hmr: true,
-            },
-          },
-        ],
-      },
       {
         test: /\.js$/,
         enforce: 'pre', // this forces this rule to run first.
@@ -61,11 +45,6 @@ module.exports = merge(common, {
     },
   },
   plugins: [
-    new MiniCssExtractPlugin({
-      filename: `${STATIC_DIRECTORY}[contenthash:10].css`,
-      chunkFilename: `${STATIC_DIRECTORY}[id].[contenthash:10].css`,
-    }),
-    new ForkTsCheckerWebpackPlugin(),
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       reportFilename: 'bundle-report.html',