Commit 544c7ccd authored by Imran Salam's avatar Imran Salam
Browse files

replace react-hot-reloader with webpack hmr and uglify js with terser js

parent a3a30e9a
......@@ -10,7 +10,6 @@ module.exports = {
]
],
plugins: [
'react-hot-loader/babel',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-class-properties',
......
......@@ -14,8 +14,8 @@
"license": "MIT",
"scripts": {
"start": "npm run serve:dev",
"serve:dev": "webpack-dev-server --config ./webpack/webpack.config.dev.js --hot --inline",
"serve:prod": "node ./server.js --NODE_ENV=production",
"serve:dev": "webpack-dev-server --config ./webpack/webpack.config.dev.js",
"serve:prod": "node ./server.js",
"build": "rimraf ./dist && webpack --config ./webpack/webpack.config.prod.js",
"deploy": "node deploy",
"certify": "node setup-ssl",
......@@ -44,7 +44,6 @@
"react": "^16.8.0",
"react-contenteditable": "^3.2.6",
"react-dom": "^16.8.0",
"react-hot-loader": "^4.6.5",
"react-redux": "^5.1.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
......@@ -75,6 +74,7 @@
"@types/react-router-dom": "^4.3.1",
"@types/react-router-hash-link": "^1.2.0",
"@types/redux-mock-store": "^1.0.0",
"@types/webpack-env": "^1.13.7",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.5",
"babel-plugin-react-css-modules-sass": "^1.1.0",
......@@ -116,12 +116,12 @@
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-scss": "^3.5.2",
"stylelint-webpack-plugin": "^0.10.5",
"terser-webpack-plugin": "^1.2.2",
"ts-jest": "^23.10.5",
"tslint": "^5.12.1",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^3.6.0",
"typescript": "^3.3.1",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.29.2",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.2.3",
......
......@@ -16,4 +16,8 @@ render(
document.getElementById('ens-app')
);
registerSW();
if (module.hot) {
module.hot.accept();
} else {
registerSW();
}
......@@ -7,7 +7,7 @@ declare global {
export function registerSW() {
window.nodeEnv = process.env.NODE_ENV;
if (window.nodeEnv === 'production' && 'serviceWorker' in navigator) {
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
......
const webpack = require('webpack');
const path = require('path');
const StylelintWebpackPlugin = require('stylelint-webpack-plugin');
......@@ -16,6 +17,10 @@ const moduleRules = [
// plugins specific to dev
const plugins = [
// this plugin is required to enable hot module reloading
// for the webpack dev server
new webpack.HotModuleReplacementPlugin(),
// lint the SASS files within the Ensembl codebase only
new StylelintWebpackPlugin({
context: path.join(__dirname, '../src'),
......@@ -56,6 +61,9 @@ const devConfig = {
// this should prevent 404 errors that usually occur in SPA on reloads
historyApiFallback: true,
// enable hot module reloading
hot: true,
// configuration to customise what is displayed in the console by webpack
stats: {
assets: false,
......
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
......@@ -96,8 +96,10 @@ const plugins = [
// prod specific configuration
const prodConfig = {
optimization: {
// use terser plugin instead of uglify js to support minimisation for modern React.js features
// optimize css assets plugin to minimise css as it is not yet supported in webpack by default
minimizer: [
new UglifyJsPlugin({
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment