From 2bf8b273d34f54c3a13e30664448131f14e976b5 Mon Sep 17 00:00:00 2001 From: bkmartinjr Date: Fri, 10 Aug 2018 08:42:24 -0700 Subject: [PATCH] continued webpack4 port: update to recent build packages, remove unused packages, production webpack port --- .../webpack/webpack.config.prod.js | 35 ++++++++++++---- client/package.json | 42 +++++++------------ client/server/production.js | 32 -------------- 3 files changed, 42 insertions(+), 67 deletions(-) delete mode 100644 client/server/production.js diff --git a/client/configuration/webpack/webpack.config.prod.js b/client/configuration/webpack/webpack.config.prod.js index 1322b448..d519dfdc 100644 --- a/client/configuration/webpack/webpack.config.prod.js +++ b/client/configuration/webpack/webpack.config.prod.js @@ -3,7 +3,7 @@ const path = require("path"); const autoprefixer = require("autoprefixer"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin"); @@ -17,7 +17,8 @@ const publicPath = "/"; module.exports = { mode: "production", bail: true, - devtool: "cheap-source-map", + // TODO: causes a js error, need to update to whatever webpack4 wants + // devtool: "cheap-source-map", entry: [require.resolve("../polyfills/polyfills"), path.join(src, "index")], output: { path: path.resolve("build"), @@ -37,11 +38,27 @@ module.exports = { { test: /\.css$/, include: [src, nodeModules], - loader: ExtractTextPlugin.extract({ - fallbackLoader: "style-loader", - loader: - "css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]-autoprefixer!postcss-loader" - }) + loader: [ + { + loader: MiniCssExtractPlugin.loader + }, + { + loader: "css-loader", + options: { + modules: true, + importLoaders: 1, + localIdentName: "[name]__[local]___[hash:base64:5]" + } + }, + { + loader: "postcss-loader", + options: { + plugins: function() { + return []; + } + } + } + ] }, { test: /\.json$/, @@ -98,7 +115,9 @@ module.exports = { new webpack.DefinePlugin({ "process.env.NODE_ENV": '"production"' }), new webpack.optimize.OccurrenceOrderPlugin(), new MinifyPlugin(), - new ExtractTextPlugin("static/css/[name].[contenthash:8].css"), + new MiniCssExtractPlugin({ + filename: "static/css/[name].[contenthash:8].css" + }), new SWPrecacheWebpackPlugin({ cacheId: "cellxgene", filename: "service-worker.js" diff --git a/client/package.json b/client/package.json index bfee334f..87ab00cc 100644 --- a/client/package.json +++ b/client/package.json @@ -13,7 +13,6 @@ "clean": "rimraf build", "start": "node server/development.js", "lint": "eslint src", - "prod": "cross-env NODE_ENV=production PORT=3000 node server/production.js", "test": "jest" }, "engineStrict": true, @@ -33,17 +32,15 @@ "dependencies": { "canvas-fit": "^1.5.0", "d3": "^4.10.0", - "express": "^4.14.0", "font-color-contrast": "^1.0.3", "gl-mat4": "^1.1.4", "gl-matrix": "^2.7.1", - "hsv2rgb": "^1.1.0", "key-pressed": "0.0.1", "lodash": "^4.17.4", "mouse-position": "^2.0.1", "mouse-pressed": "^1.0.0", "orbit-camera": "^1.0.0", - "query-string": "^5.0.0", + "query-string": "^6.1.0", "react": "^16.4.2", "react-autocomplete": "^1.7.2", "react-dom": "^16.4.1", @@ -55,15 +52,13 @@ "redux-thunk": "^2.2.0", "regl": "^1.3.1", "scroll-speed": "^1.0.0", - "serve-favicon": "^2.3.0", "urijs": "^1.19.0", - "webpack": "^4.16.0", "whatwg-fetch": "^2.0.3" }, "devDependencies": { - "autoprefixer": "^6.4.0", + "autoprefixer": "^9.1.0", "babel-core": "^6.13.2", - "babel-eslint": "^7.1.1", + "babel-eslint": "^8.2.6", "babel-loader": "^7.1.2", "babel-minify-webpack-plugin": "^0.3.1", "babel-plugin-istanbul": "^3.1.2", @@ -76,40 +71,33 @@ "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.11.6", "babel-runtime": "^6.11.6", - "buffer-shims": "^1.0.0", "chalk": "^1.1.3", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", - "cross-env": "^3.1.4", "css-loader": "^1.0.0", - "css-modules-require-hook": "^4.0.1", - "enzyme": "^3.3.0", - "eslint": "^4.18.2", + "eslint": "^5.3.0", + "eslint-config-airbnb": "^17.0.0", "eslint-loader": "^1.5.0", - "eslint-plugin-filenames": "^1.1.0", - "eslint-plugin-import": "^2.2.0", + "eslint-plugin-filenames": "^1.3.2", + "eslint-plugin-import": "^2.13.0", "eslint-plugin-jsx-a11y": "^6.1.1", - "eslint-plugin-react": "^6.0.0", - "extract-text-webpack-plugin": "^2.0.0-beta.3", - "file-loader": "^0.9.0", - "filesize": "^3.3.0", - "gzip-size": "^3.0.0", + "eslint-plugin-react": "^7.10.0", + "express": "^4.14.0", + "file-loader": "^1.1.11", "html-webpack-inline-source-plugin": "0.0.10", "html-webpack-plugin": "^3.2.0", "jest": "^23.4.1", - "jsdom": "^9.4.1", "json-loader": "^0.5.4", + "mini-css-extract-plugin": "^0.4.1", "nyc": "^13.0.1", - "postcss": "^6.0.0", - "postcss-loader": "^1.2.2", + "postcss-loader": "^2.1.6", "promise": "^7.1.1", - "react-addons-test-utils": "^15.3.0", "redbox-react": "^1.3.0", "rimraf": "^2.5.4", - "style-loader": "^0.13.1", + "serve-favicon": "^2.3.0", + "style-loader": "^0.22.1", "sw-precache-webpack-plugin": "^0.7.1", - "url-loader": "^0.6.0", - "web-app-manifest-loader": "^0.1.1", + "url-loader": "^1.0.1", "webpack": "^4.16.0", "webpack-cli": "^3.1.0", "webpack-dev-middleware": "^1.6.1", diff --git a/client/server/production.js b/client/server/production.js deleted file mode 100644 index 993a4afc..00000000 --- a/client/server/production.js +++ /dev/null @@ -1,32 +0,0 @@ -/* eslint-disable */ -// jshint esversion: 6 -var path = require("path"); -var fs = require("fs"); -var chalk = require("chalk"); -var express = require("express"); -var favicon = require("serve-favicon"); -var utils = require("./utils"); - -var PORT = process.env.PORT || 80; - -// Launch server -var app = express(); - -app.use(express.static("./build")); - -app.use(favicon("./build/favicon.png")); - -app.get("*", (req, res) => { - res.sendFile(path.resolve("./build/index.html")); -}); - -app.listen(PORT, err => { - if (err) { - console.log(err); - return; - } - - utils.clearConsole(); - console.log(chalk.cyan("Production server started on port " + PORT)); - console.log(); -});