Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Nov 11, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd13c0e
fix(ui): bridging some drift so that they both break equally
Nov 8, 2019
dd5a814
fix(ui): make the darn thing actually work
Nov 8, 2019
d13a1ba
fix: get terser to stop tree shaking valid functions
Nov 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
3 changes: 1 addition & 2 deletions ui/src/me/components/GettingStarted.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
}

.getting-started--card {
position: absolute;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does removing this not break anything visually?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i have no idea as these classes aren't scoped, was leaning on you for that 😬

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this line WAS getting overwritten on your branch in dev mode, but when production flipped the css rule order, this is what made the giant page thing

width: 100%;
height: 100%;
border: $ix-border solid $g4-onyx;
Expand Down Expand Up @@ -88,4 +87,4 @@
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 320px;
}
}
}
25 changes: 25 additions & 0 deletions ui/webpack.common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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: [{
Expand Down Expand Up @@ -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)
Expand Down
26 changes: 0 additions & 26 deletions ui/webpack.dev.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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',
Expand Down
21 changes: 0 additions & 21 deletions ui/webpack.prod.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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.
Expand All @@ -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',
Expand Down
Loading