renames client to admin, sets up component library

src/webpack/getWebpackDevConfig.js

@@ -1,7 +1,7 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
-const getStyleLoaders = require('./getStyleLoaders');
+const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 const babelConfig = require('../../babel.config');
 
 const mockModulePath = path.resolve(__dirname, '../mocks/emptyModule.js');
@@ -11,7 +11,7 @@ module.exports = (config) => {
     entry: {
       main: [
         'webpack-hot-middleware/client',
-        path.resolve(__dirname, '../client/components/index.js'),
+        path.resolve(__dirname, '../admin/index.js'),
       ],
     },
     output: {
@@ -19,7 +19,7 @@ module.exports = (config) => {
       publicPath: config.routes.admin,
       filename: '[name].js',
     },
-    devtool: 'source-map',
+    devtool: 'inline-cheap-source-map',
     mode: 'development',
     resolveLoader: { modules: ['node_modules', path.join(__dirname, '../../node_modules')] },
     module: {
@@ -32,23 +32,10 @@ module.exports = (config) => {
               loader: 'babel-loader',
               options: babelConfig,
             },
-            // {
-            //   loader: 'eslint-loader',
-            //   options: {
-            //     fix: true,
-            //     emitWarning: true,
-            //   },
-            // }
           ],
         },
         {
-          // "oneOf" will traverse all following loaders until one will
-          // match the requirements. When no loader matches it will fall
-          // back to the "file" loader at the end of the loader list.
           oneOf: [
-            // "url" loader works like "file" loader except that it embeds assets
-            // smaller than specified limit in bytes as data URLs to avoid requests.
-            // A missing `test` is equivalent to a match.
             {
               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
               loader: require.resolve('url-loader'),
@@ -57,23 +44,25 @@ module.exports = (config) => {
                 name: 'static/media/[name].[hash:8].[ext]',
               },
             },
-            // Opt-in support for SASS (using .scss or .sass extensions).
-            // Chains the sass-loader with the css-loader and the style-loader
-            // to immediately apply all styles to the DOM.
             {
-              test: /\.(scss|sass|css)$/,
-              use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
+              test: /\.(sa|sc|c)ss$/,
+              use: [
+                MiniCSSExtractPlugin.loader,
+                'css-loader',
+                {
+                  loader: 'postcss-loader',
+                  options: {
+                    postcssOptions: {
+                      plugins: [
+                        'postcss-preset-env',
+                      ],
+                    },
+                  },
+                },
+                'sass-loader',
+              ],
             },
-            // "file" loader makes sure those assets get served by WebpackDevServer.
-            // When you `import` an asset, you get its (virtual) filename.
-            // In production, they would get copied to the `build` folder.
-            // This loader doesn't use a "test" so it will catch all modules
-            // that fall through the other loaders.
             {
-              // Exclude `js` files to keep "css" loader working as it injects
-              // its runtime that would otherwise processed through "file" loader.
-              // Also exclude `html` and `json` extensions so they get processed
-              // by webpacks internal loaders.
               exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
               loader: require.resolve('file-loader'),
               options: {
@@ -99,10 +88,13 @@ module.exports = (config) => {
       new HtmlWebpackPlugin({
         template: config.admin && config.admin.indexHTML
           ? path.join(config.paths.configDir, config.admin.indexHTML)
-          : path.resolve(__dirname, '../client/index.html'),
+          : path.resolve(__dirname, '../admin/index.html'),
         filename: './index.html',
       }),
       new webpack.HotModuleReplacementPlugin(),
+      new MiniCSSExtractPlugin({
+        ignoreOrder: true,
+      }),
     ],
   };
 
@@ -115,7 +107,7 @@ module.exports = (config) => {
   if (config.paths.scss) {
     webpackConfig.resolve.alias['payload-scss-overrides'] = path.join(config.paths.configDir, config.paths.scss);
   } else {
-    webpackConfig.resolve.alias['payload-scss-overrides'] = path.resolve(__dirname, '../client/scss/overrides.scss');
+    webpackConfig.resolve.alias['payload-scss-overrides'] = path.resolve(__dirname, '../admin/scss/overrides.scss');
   }
 
   if (config.webpack && typeof config.webpack === 'function') {