From 512a633c0c112fee698a57c4968b88f778951a3d Mon Sep 17 00:00:00 2001 From: Alex Mikhalev Date: Tue, 3 Oct 2017 12:18:30 -0600 Subject: [PATCH] Made better webpack configs --- app/components/RunSectionForm.tsx | 10 +- app/polyfills.js | 16 + app/webpack.config.js | 234 ++++++++++++++ app/webpack/base.config.js | 41 --- app/webpack/config.js | 5 - app/webpack/dev.config.js | 21 -- app/webpack/prod.config.js | 7 - common/mqtt.ts | 2 +- common/sprinklers.ts | 7 + env.js | 86 ++++++ package.json | 24 +- paths.js | 37 +++ server/app/serveApp.ts | 5 +- server/index.ts | 17 +- server/module-alias.d.ts | 12 + server/tsconfig.json | 12 +- yarn.lock | 497 ++++++++++++++++++++++++++++-- 17 files changed, 910 insertions(+), 123 deletions(-) create mode 100644 app/polyfills.js create mode 100644 app/webpack.config.js delete mode 100644 app/webpack/base.config.js delete mode 100644 app/webpack/config.js delete mode 100644 app/webpack/dev.config.js delete mode 100644 app/webpack/prod.config.js create mode 100644 env.js create mode 100644 paths.js create mode 100644 server/module-alias.d.ts diff --git a/app/components/RunSectionForm.tsx b/app/components/RunSectionForm.tsx index 15a950b..bff6880 100644 --- a/app/components/RunSectionForm.tsx +++ b/app/components/RunSectionForm.tsx @@ -3,6 +3,7 @@ import { observer } from "mobx-react"; import * as React from "react"; import { DropdownItemProps, DropdownProps, Form, Header, Segment } from "semantic-ui-react"; +import log from "@common/logger"; import { Duration, Section } from "@common/sprinklers"; import DurationInput from "./DurationInput"; @@ -65,10 +66,11 @@ export default class RunSectionForm extends React.Component<{ return; } const section: Section = this.props.sections[this.state.section]; - console.log(`running section ${section} for ${this.state.duration}`); - section.run(this.state.duration) - .then((a) => console.log("ran section", a)) - .catch((err) => console.error("error running section", err)); + const { duration } = this.state; + log.debug({ section, duration }, "running section"); + section.run(duration) + .then((a) => log.debug("ran section", a)) + .catch((err) => log.error(err, "error running section")); } private get isValid(): boolean { diff --git a/app/polyfills.js b/app/polyfills.js new file mode 100644 index 0000000..49df7d6 --- /dev/null +++ b/app/polyfills.js @@ -0,0 +1,16 @@ +'use strict'; + +if (typeof Promise === 'undefined') { + // Rejection tracking prevents a common issue where React gets into an + // inconsistent state due to an error, but it gets swallowed by a Promise, + // and the user has no idea what causes React's erratic future behavior. + require('promise/lib/rejection-tracking').enable(); + window.Promise = require('promise/lib/es6-extensions.js'); +} + +// fetch() polyfill for making API calls. +// require('whatwg-fetch'); + +// Object.assign() is commonly used with React. +// It will use the native implementation if it's present and isn't buggy. +Object.assign = require('object-assign'); diff --git a/app/webpack.config.js b/app/webpack.config.js new file mode 100644 index 0000000..89d14e5 --- /dev/null +++ b/app/webpack.config.js @@ -0,0 +1,234 @@ +const autoprefixer = require("autoprefixer"); +const path = require("path"); +const webpack = require("webpack"); + +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin"); +const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin"); +const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); + +const { getClientEnvironment } = require("../env"); +const paths = require("../paths"); + +// Webpack uses `publicPath` to determine where the app is being served from. +// It requires a trailing slash, or the file assets will get an incorrect path. +const publicPath = paths.publicPath; +// `publicUrl` is just like `publicPath`, but we will provide it to our app +// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. +// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. +const publicUrl = paths.publicUrl.slice(0, -1); +// Source maps are resource heavy and can cause out of memory issue for large source files. +const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; +// Some apps do not use client-side routing with pushState. +// For these, "homepage" can be set to "." to enable relative asset paths. +const shouldUseRelativeAssetPaths = publicPath === "./"; +// Get environment variables to inject into our app. +const environ = getClientEnvironment(publicUrl); + +// Note: defined here because it will be used more than once. +const cssFilename = "static/css/[name].[contenthash:8].css"; + +const postCssConfig = { + loader: require.resolve("postcss-loader"), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: "postcss", + plugins: () => [ + require("postcss-flexbugs-fixes"), + autoprefixer({ + browsers: [ + ">1%", + "last 4 versions", + "Firefox ESR", + "not ie < 9", // React doesn"t support IE8 anyway + ], + flexbox: "no-2009", + }), + ], + }, +}; + +const rules = (env) => { + // "postcss" loader applies autoprefixer to our CSS. + // "css" loader resolves paths in CSS and adds assets as dependencies. + // "style" loader turns CSS into JS modules that inject