improve builds and local development

babel.config.js

@@ -31,23 +31,19 @@ module.exports = {
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-object-rest-spread',
     '@babel/plugin-proposal-export-default-from',
-    ['inline-svg', {
-      svgo: {
-        plugins: [
-          {removeViewBox: false},
-        ],
-      },
-    }],
   ],
   env: {
     production: {
       plugins: [
-        ['emotion', {hoist: true}],
+        ['emotion', { hoist: true }],
       ],
     },
     development: {
       plugins: [
-        ['emotion', {sourceMap: true, autoLabel: true}],
+        ['emotion', {
+          sourceMap: true,
+          autoLabel: true,
+        }],
       ],
     },
   },

package.json

@@ -60,15 +60,16 @@
     "last 2 ChromeAndroid versions"
   ],
   "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.54",
+    "@babel/core": "^7.0.0-beta.54",
     "@babel/plugin-proposal-class-properties": "^7.0.0-beta.54",
     "@babel/plugin-proposal-export-default-from": "^7.0.0-beta.54",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.54",
     "@babel/preset-env": "^7.0.0-beta.54",
     "@babel/preset-react": "^7.0.0-beta.54",
     "all-contributors-cli": "^4.4.0",
+    "babel-loader": "^8.0.0-beta",
     "babel-plugin-emotion": "^9.2.4",
-    "babel-plugin-inline-import": "^3.0.0",
-    "babel-plugin-inline-svg": "^1.0.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-transform-builtin-extend": "^1.1.2",
@@ -78,22 +79,18 @@
     "deep-equal": "^1.0.1",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "jest": "^22.0.0",
     "jest-cli": "^22.0.0",
     "lerna": "^2.11.0",
-    "postcss-cssnext": "^3.0.2",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.1.3",
     "raf": "^3.4.0",
     "react-test-renderer": "^16.0.0",
     "rimraf": "^2.6.2",
-    "rollup-plugin-babel": "^3.0.7"
+    "style-loader": "^0.21.0",
+    "svg-inline-loader": "^0.8.0"
   },
   "workspaces": [
     "packages/*"
   ],
-  "private": true,
+  "private": true
-  "dependencies": {
-    "friendly-errors-webpack-plugin": "^1.7.0"
-  }
 }

packages/netlify-cms-backend-github/babel.config.js

@@ -1,3 +0,0 @@
-const config = require('../../babel.config.js');
-
-module.exports = config;

packages/netlify-cms-backend-github/package.json

@@ -13,18 +13,13 @@
   "sideEffects": false,
   "scripts": {
     "watch": "webpack -w",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "webpack"
   },
   "dependencies": {
     "js-base64": "^2.4.8",
     "semaphore": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.54",
-    "@babel/core": "^7.0.0-beta.54",
-    "cross-env": "^5.2.0",
-    "rollup": "^0.63.2",
-    "rollup-plugin-babel": "^4.0.0-beta.7",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.0"
   },

packages/netlify-cms-backend-gitlab/babel.config.js

@@ -1,3 +0,0 @@
-const config = require('../../babel.config.js');
-
-module.exports = config;

packages/netlify-cms-backend-gitlab/package.json

@@ -13,18 +13,13 @@
   "sideEffects": false,
   "scripts": {
     "watch": "webpack -w",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "webpack"
   },
   "dependencies": {
     "js-base64": "^2.4.8",
     "semaphore": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.54",
-    "@babel/core": "^7.0.0-beta.54",
-    "cross-env": "^5.2.0",
-    "rollup": "^0.63.2",
-    "rollup-plugin-babel": "^4.0.0-beta.7",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.0"
   },

packages/netlify-cms-backend-test/babel.config.js

@@ -1,3 +0,0 @@
-const config = require('../../babel.config.js');
-
-module.exports = config;

packages/netlify-cms-backend-test/package.json

@@ -12,17 +12,12 @@
   "sideEffects": false,
   "scripts": {
     "watch": "webpack -w",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "webpack"
   },
   "dependencies": {
     "uuid": "^3.3.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.54",
-    "@babel/core": "^7.0.0-beta.54",
-    "cross-env": "^5.2.0",
-    "rollup": "^0.63.2",
-    "rollup-plugin-babel": "^4.0.0-beta.7",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.0"
   },

packages/netlify-cms-core/babel.config.js

@@ -1,3 +0,0 @@
-const config = require('../../babel.config.js');
-
-module.exports = config;

packages/netlify-cms-core/package.json

@@ -15,8 +15,8 @@
     "dist/"
   ],
   "scripts": {
-    "watch": "cross-env NETLIFY_CMS_VERSION=$npm_package_version webpack-dev-server --hot --open",
+    "watch": "webpack-dev-server --hot --open",
-    "build": "cross-env NETLIFY_CMS_VERSION=$npm_package_version webpack"
+    "build": "webpack"
   },
   "keywords": [
     "netlify",
@@ -42,7 +42,7 @@
     "jwt-decode": "^2.1.0",
     "lib": "^3.0.2",
     "localforage": "^1.4.2",
-    "lodash": "^4.13.1",
+    "lodash": "^4.17.10",
     "mdast-util-definitions": "^1.2.2",
     "mdast-util-to-string": "^1.0.4",
     "moment": "^2.11.2",
@@ -104,11 +104,11 @@
     "what-input": "^5.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.54",
+    "css-loader": "^1.0.0",
-    "babel-loader": "^8.0.0-beta",
+    "friendly-errors-webpack-plugin": "^1.7.0",
-    "cross-env": "^5.2.0",
+    "to-string-loader": "^1.1.5",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.4"
+    "webpack-dev-server": "^3.1.5"
   }
 }

packages/netlify-cms-core/src/components/UI/Toast.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css, injectGlobal, cx } from 'react-emotion';
-//import 'redux-notifications/lib/styles.css'; // Import default redux-notifications styles into global scope.
+import reduxNotificationsStyles from 'redux-notifications/lib/styles.css';
 import { shadows, colors, lengths } from 'netlify-cms-ui-default';
 
 injectGlobal`
+  ${reduxNotificationsStyles};
+
   .notif__container {
     z-index: 10000;
   }

packages/netlify-cms-core/webpack.config.js

@@ -7,8 +7,14 @@ module.exports = {
   context: path.join(__dirname, 'src'),
   entry: './index.js',
   module: {
-    noParse: /\.css$/,
+    rules: [
-    ...baseConfig.module,
+      ...baseConfig.module.rules,
+      {
+        test: /\.css$/,
+        include: [/redux-notifications/],
+        use: ['to-string-loader', 'css-loader'],
+      },
+    ],
   },
   devServer: {
     contentBase: './example',
@@ -18,6 +24,7 @@ module.exports = {
     port: 8080,
   },
   plugins: [
+    ...baseConfig.plugins.filter(plugin => !plugin instanceof FriendlyErrorsWebpackPlugin),
     new FriendlyErrorsWebpackPlugin({
       compilationSuccessInfo: {
         messages: ['Netlify CMS is now running at http://localhost:8080'],

packages/netlify-cms-editor-component-image/babel.config.js

@@ -1,3 +0,0 @@
-const config = require('../../babel.config.js');
-
-module.exports = config;

packages/netlify-cms-editor-component-image/package.json

@@ -13,14 +13,9 @@
   "sideEffects": false,
   "scripts": {
     "watch": "webpack -w",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "webpack"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.54",
-    "@babel/core": "^7.0.0-beta.54",
-    "cross-env": "^5.2.0",
-    "rollup": "^0.63.2",
-    "rollup-plugin-babel": "^4.0.0-beta.7",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.0"
   },

packages/netlify-cms-lib-auth/babel.config.js

@@ -1,3 +0,0 @@
-const config = require('../../babel.config.js');
-
-module.exports = config;

packages/netlify-cms-lib-auth/package.json

@@ -14,17 +14,12 @@
   "sideEffects": false,
   "scripts": {
     "watch": "webpack -w",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "webpack"
   },
   "dependencies": {
     "uuid": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.54",
-    "@babel/core": "^7.0.0-beta.54",
-    "cross-env": "^5.2.0",
-    "rollup": "^0.63.2",
-    "rollup-plugin-babel": "^4.0.0-beta.7",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.0"
   },

packages/netlify-cms-lib-util/babel.config.js

@@ -1,3 +0,0 @@
-const config = require('../../babel.config.js');
-
-module.exports = config;

packages/netlify-cms-lib-util/package.json

@@ -10,17 +10,12 @@
   "sideEffects": false,
   "scripts": {
     "watch": "webpack -w",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "webpack"
   },
   "dependencies": {
     "localforage": "^1.4.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.54",
-    "@babel/core": "^7.0.0-beta.54",
-    "cross-env": "^5.2.0",
-    "rollup": "^0.63.2",
-    "rollup-plugin-babel": "^4.0.0-beta.7",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.0"
   },

packages/netlify-cms-ui-default/babel.config.js

@@ -1,3 +0,0 @@
-const config = require('../../babel.config.js');
-
-module.exports = config;

packages/netlify-cms-ui-default/package.json

@@ -10,7 +10,7 @@
   "sideEffects": false,
   "scripts": {
     "watch": "webpack -w",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "webpack"
   },
   "dependencies": {
     "react-aria-menubutton": "^5.1.0",
@@ -18,11 +18,6 @@
     "react-transition-group": "^2.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.54",
-    "@babel/core": "^7.0.0-beta.54",
-    "cross-env": "^5.2.0",
-    "rollup": "^0.63.2",
-    "rollup-plugin-babel": "^4.0.0-beta.7",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.0"
   },

webpack.config.js

@@ -1,10 +1,51 @@
 const fs = require('fs');
 const path = require('path');
+const webpack = require('webpack');
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
 const pkg = require(path.join(process.cwd(), 'package.json'));
 
+const isProduction = process.env.NODE_ENV === 'production';
+
+const plugins = () => {
+  const defaultPlugins = [
+    new FriendlyErrorsWebpackPlugin(),
+  ];
+
+  if (isProduction) {
+    return [
+      ...defaultPlugins,
+      new webpack.SourceMapDevToolPlugin({
+        filename: '[file].map',
+        moduleFilenameTemplate: info => path.posix.normalize(`../src/${info.resourcePath}`),
+        noSources: true,
+      }),
+    ];
+  }
+
+  return [
+    ...defaultPlugins,
+  ];
+};
+
+const stats = () => {
+  if (isProduction) {
+    return {
+      builtAt: false,
+      colors: true,
+      entrypoints: false,
+      hash: false,
+      modules: false,
+      timings: false,
+      version: false,
+    };
+  }
+  return {
+    all: false,
+  };
+};
+
 module.exports = {
-  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  mode: isProduction ? 'production' : 'development',
   entry: './src/index.js',
   output: {
     path: process.cwd(),
@@ -17,22 +58,31 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        use: 'babel-loader',
+        use: {
+          loader: 'babel-loader',
+          options: {
+            configFile: path.join(__dirname, 'babel.config.js'),
+          },
+        },
         exclude: /node_modules/,
       },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        exclude: [/node_modules/],
+        loader: 'svg-inline-loader',
+      },
     ],
   },
-  plugins: [
+  plugins: plugins(),
-    new FriendlyErrorsWebpackPlugin(),
+  devtool: !isProduction && 'source-map',
-  ],
-  devtool: 'source-map',
   target: 'web',
+  /**
+   * Exclude peer dependencies from package bundles.
+   */
   externals: (context, request, cb) => {
     const peerDeps = Object.keys(pkg.peerDependencies || {});
     const isPeerDep = dep => new RegExp(`^${dep}($|/)`).test(request);
     return peerDeps.some(isPeerDep) ? cb(null, request) : cb();
   },
-  stats: {
+  stats: stats(),
-    all: false,
-  },
 };