Get basic compiling working with new CSS setup

.babel-plugin-macrosrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+    twin: {
+        preset: 'styled-components',
+        autoCssProp: true,
+        config: './tailwind.config.js',
+    },
+    styledComponents: {
+        pure: true,
+        displayName: false,
+        fileName: false,
+    },
+};

babel.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+    presets: [
+        '@babel/typescript',
+        ['@babel/env', {
+            modules: false,
+            useBuiltIns: 'entry',
+            corejs: 3,
+        }],
+        '@babel/react',
+    ],
+    plugins: [
+        'babel-plugin-macros',
+        'styled-components',
+        'react-hot-loader/babel',
+        '@babel/transform-runtime',
+        '@babel/transform-react-jsx',
+        '@babel/proposal-class-properties',
+        '@babel/proposal-object-rest-spread',
+        '@babel/proposal-optional-chaining',
+        '@babel/proposal-nullish-coalescing-operator',
+        '@babel/syntax-dynamic-import',
+    ],
+};

package.json

@@ -5,13 +5,13 @@
         "@fortawesome/free-solid-svg-icons": "^5.9.0",
         "@fortawesome/react-fontawesome": "^0.1.4",
         "@types/react-google-recaptcha": "^1.1.1",
-        "axios": "^0.19.0",
+        "axios": "^0.19.2",
         "ayu-ace": "^2.0.4",
         "brace": "^0.11.1",
         "chart.js": "^2.8.0",
         "classnames": "^2.2.6",
-        "date-fns": "^1.29.0",
+        "date-fns": "^2.14.0",
-        "easy-peasy": "^3.2.3",
+        "easy-peasy": "^3.3.1",
         "events": "^3.0.0",
         "formik": "^2.1.4",
         "i18next": "^19.0.0",
@@ -22,23 +22,23 @@
         "lodash-es": "^4.17.15",
         "path": "^0.12.7",
         "query-string": "^6.7.0",
-        "react": "^16.12.0",
+        "react": "^16.13.1",
         "react-dom": "npm:@hot-loader/react-dom",
         "react-google-recaptcha": "^2.0.1",
-        "react-hot-loader": "^4.12.18",
+        "react-hot-loader": "^4.12.21",
         "react-i18next": "^11.2.1",
         "react-redux": "^7.1.0",
         "react-router-dom": "^5.1.2",
         "react-transition-group": "^4.3.0",
         "sockette": "^2.0.6",
-        "styled-components": "^4.4.1",
+        "styled-components": "^5.1.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
         "use-react-router": "^1.0.7",
         "uuid": "^3.3.2",
         "xterm": "^3.14.4",
         "xterm-addon-attach": "^0.1.0",
         "xterm-addon-fit": "^0.1.0",
-        "yup": "^0.27.0"
+        "yup": "^0.29.1"
     },
     "devDependencies": {
         "@babel/core": "^7.7.5",
@@ -47,6 +47,7 @@
         "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
         "@babel/plugin-proposal-optional-chaining": "^7.8.3",
         "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+        "@babel/plugin-transform-react-jsx": "^7.10.4",
         "@babel/plugin-transform-runtime": "^7.7.5",
         "@babel/preset-env": "^7.7.5",
         "@babel/preset-react": "^7.7.4",
@@ -60,32 +61,33 @@
         "@types/lodash-es": "^4.17.3",
         "@types/node": "^12.6.9",
         "@types/query-string": "^6.3.0",
-        "@types/react": "^16.9.15",
+        "@types/react": "^16.9.41",
-        "@types/react-dom": "^16.9.4",
+        "@types/react-dom": "^16.9.8",
         "@types/react-redux": "^7.1.1",
         "@types/react-router": "^5.1.3",
         "@types/react-router-dom": "^5.1.3",
         "@types/react-transition-group": "^2.9.2",
         "@types/styled-components": "^4.4.0",
         "@types/uuid": "^3.4.5",
-        "@types/webpack-env": "^1.13.6",
+        "@types/webpack-env": "^1.15.2",
-        "@types/yup": "^0.26.17",
+        "@types/yup": "^0.29.3",
-        "@typescript-eslint/eslint-plugin": "^2.19.0",
+        "@typescript-eslint/eslint-plugin": "^3.5.0",
-        "@typescript-eslint/parser": "^2.19.0",
+        "@typescript-eslint/parser": "^3.5.0",
         "babel-loader": "^8.0.6",
-        "babel-plugin-styled-components": "^1.10.6",
+        "babel-plugin-styled-components": "^1.10.7",
         "babel-plugin-tailwind-components": "^0.5.10",
         "cross-env": "^7.0.2",
         "css-loader": "^3.2.1",
         "cssnano": "^4.1.10",
-        "eslint": "^5.16.0",
+        "eslint": "^7.4.0",
-        "eslint-config-standard": "^12.0.0",
+        "eslint-config-standard": "^14.1.1",
-        "eslint-plugin-import": "^2.17.3",
+        "eslint-plugin-import": "^2.22.0",
         "eslint-plugin-node": "^9.1.0",
-        "eslint-plugin-promise": "^4.1.1",
+        "eslint-plugin-promise": "^4.2.1",
-        "eslint-plugin-react-hooks": "^2.1.2",
+        "eslint-plugin-react": "^7.20.3",
-        "eslint-plugin-standard": "^4.0.0",
+        "eslint-plugin-react-hooks": "^4.0.5",
-        "fork-ts-checker-webpack-plugin": "^1.5.0",
+        "eslint-plugin-standard": "^4.0.1",
+        "fork-ts-checker-webpack-plugin": "^5.0.6",
         "glob-all": "^3.1.0",
         "html-webpack-plugin": "^3.2.0",
         "mini-css-extract-plugin": "^0.8.0",
@@ -97,17 +99,19 @@
         "purgecss-webpack-plugin": "^1.6.0",
         "redux-devtools-extension": "^2.13.8",
         "resolve-url-loader": "^3.0.0",
-        "source-map-loader": "^0.2.4",
+        "source-map-loader": "^1.0.1",
-        "style-loader": "^0.23.1",
+        "style-loader": "^1.2.1",
-        "tailwindcss": "^0.7.4",
+        "tailwindcss": "^1.4.6",
-        "terser-webpack-plugin": "^1.3.0",
+        "terser-webpack-plugin": "^3.0.6",
         "ts-loader": "^6.2.1",
-        "typescript": "^3.7.5",
+        "twin.macro": "^1.4.1",
-        "webpack": "^4.41.2",
+        "typescript": "^3.9.6",
+        "typescript-plugin-tw-template": "^2.0.1",
+        "webpack": "^4.43.0",
         "webpack-assets-manifest": "^3.1.1",
-        "webpack-cli": "^3.3.10",
+        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "^3.9.0",
+        "webpack-dev-server": "^3.11.0",
-        "webpack-manifest-plugin": "^2.0.3",
+        "webpack-manifest-plugin": "^2.2.0",
         "yarn-deduplicate": "^1.1.1"
     },
     "scripts": {

resources/scripts/.eslintrc.yml

@@ -1,23 +1,35 @@
 parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: 6
+  ecmaFeatures:
+    jsx: true
   project: "./tsconfig.json"
   tsconfigRootDir: "./"
+settings:
+  react:
+    pragma: "React"
+    version: "detect"
+  linkComponents:
+    - name: Link
+      linkAttribute: to
+    - name: NavLink
+      linkAttribute: to
 env:
   browser: true
   es6: true
 plugins:
-  - "@typescript-eslint"
+  - "react"
   - "react-hooks"
+  - "@typescript-eslint"
 extends:
   - "standard"
+  - "plugin:react/recommended"
   - "plugin:@typescript-eslint/recommended"
-globals:
-  tw: "readonly"
 rules:
   indent:
     - error
     - 4
+    - SwitchCase: 1
   semi:
     - error
     - always
@@ -33,6 +45,25 @@ rules:
   "@typescript-eslint/no-unused-vars": 0
   "@typescript-eslint/no-explicit-any": 0
   "@typescript-eslint/no-non-null-assertion": 0
+  no-restricted-imports:
+    - error
+    - paths:
+        - name: styled-components
+          message: Please import from styled-components/macro.
+      patterns:
+        - "!styled-components/macro"
+  "react/prop-types": 0
+  "react/display-name": 0
+  "react/jsx-indent-props":
+    - warn
+    - 4
+  "react/jsx-boolean-value":
+    - warn
+    - never
+  "react/jsx-closing-bracket-location":
+    - 1
+    - "line-aligned"
+  "react/jsx-closing-tag-location": 1
 overrides:
   - files:
       - "**/*.tsx"

resources/scripts/components/App.tsx

@@ -18,11 +18,13 @@ interface ExtendedWindow extends Window {
         uuid: string;
         username: string;
         email: string;
+        /* eslint-disable camelcase */
         root_admin: boolean;
         use_totp: boolean;
         language: string;
         updated_at: string;
         created_at: string;
+        /* eslint-enable camelcase */
     };
 }
 

resources/scripts/components/elements/ContentContainer.tsx

@@ -1,5 +1,6 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
-import { breakpoint } from 'styled-components-breakpoint';
+import { breakpoint } from '@/theme';
+import tw from 'twin.macro';
 
 const ContentContainer = styled.div`
     max-width: 1200px;
@@ -9,5 +10,6 @@ const ContentContainer = styled.div`
         ${tw`mx-auto`};
     `};
 `;
+ContentContainer.displayName = 'ContentContainer';
 
 export default ContentContainer;

resources/scripts/components/server/backups/BackupRow.tsx

@@ -1,18 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { ServerBackup } from '@/api/server/backups/getServerBackups';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArchive } from '@fortawesome/free-solid-svg-icons/faArchive';
-import format from 'date-fns/format';
+import { format, formatDistanceToNow } from 'date-fns';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import Spinner from '@/components/elements/Spinner';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import { bytesToHuman } from '@/helpers';
 import Can from '@/components/elements/Can';
-import useServer from '@/plugins/useServer';
-import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import useFlash from '@/plugins/useFlash';
-import { httpErrorToHuman } from '@/api/http';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
@@ -65,7 +58,7 @@ export default ({ backup, className }: Props) => {
                     title={format(backup.createdAt, 'ddd, MMMM Do, YYYY HH:mm:ss Z')}
                     className={'text-sm'}
                 >
-                    {distanceInWordsToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
+                    {formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
                 </p>
                 <p className={'text-2xs text-neutral-500 uppercase mt-1'}>Created</p>
             </div>

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -3,9 +3,7 @@ import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
 import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
 import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
 import { bytesToHuman, cleanDirectoryPath } from '@/helpers';
-import differenceInHours from 'date-fns/difference_in_hours';
+import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
-import format from 'date-fns/format';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import React from 'react';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
@@ -65,7 +63,7 @@ export default ({ file }: { file: FileObject }) => {
                     {Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
                         format(file.modifiedAt, 'MMM Do, YYYY h:mma')
                         :
-                        distanceInWordsToNow(file.modifiedAt, { addSuffix: true })
+                        formatDistanceToNow(file.modifiedAt, { addSuffix: true })
                     }
                 </div>
             </NavLink>

resources/scripts/gloabl.d.ts

@@ -1 +0,0 @@
-declare function tw (a: TemplateStringsArray | string): any;

resources/scripts/index.tsx

@@ -4,6 +4,8 @@ import App from '@/components/App';
 import './i18n';
 import { setConfig } from 'react-hot-loader';
 
+import 'tailwindcss/dist/base.min.css';
+
 // Prevents page reloads while making component changes which
 // also avoids triggering constant loading indicators all over
 // the place in development.

resources/scripts/macros.d.ts

@@ -0,0 +1,4 @@
+// This allows the use of css={} on JSX elements.
+//
+// @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
+import {} from 'styled-components/cssprop';

resources/scripts/style.d.ts

@@ -1,17 +0,0 @@
-import { Breakpoints, css, DefaultTheme, StyledProps } from 'styled-components';
-
-declare module 'styled-components' {
-    type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-    export interface DefaultTheme {
-        breakpoints: {
-            [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;
-        };
-    }
-}
-
-declare module 'styled-components-breakpoint' {
-    type CSSFunction = (...params: Parameters<typeof css>) => <P extends object>({ theme }: StyledProps<P>) => ReturnType<typeof css>;
-
-    export const breakpoint: (breakpointA: Breakpoints, breakpointB?: Breakpoints) => CSSFunction;
-}

resources/scripts/theme.ts

@@ -0,0 +1,10 @@
+import { BreakpointFunction, createBreakpoint } from 'styled-components-breakpoint';
+
+type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export const breakpoint: BreakpointFunction<Breakpoints> = createBreakpoint<Breakpoints>({
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+});

resources/views/templates/wrapper.blade.php

@@ -32,7 +32,7 @@
         @show
 
         @section('assets')
-            {!! $asset->css('main.css') !!}
+{{--            {!! $asset->css('main.css') !!}--}}
         @show
 
         @include('layouts.scripts')

tailwind.config.js

@@ -0,0 +1,114 @@
+module.exports = {
+    theme: {
+        fontFamily: {
+            sans: [
+                'Rubik',
+                '-apple-system',
+                'BlinkMacSystemFont',
+                '"Helvetica Neue"',
+                '"Roboto"',
+                'system-ui',
+                'sans-serif',
+            ],
+            header: [
+                '"IBM Plex Sans"',
+                '"Roboto"',
+                'system-ui',
+                'sans-serif',
+            ],
+            serif: [
+                'Constantia',
+                '"Lucida Bright"',
+                'Lucidabright',
+                '"Lucida Serif"',
+                'Lucida',
+                'serif',
+            ],
+            mono: [
+                '"IBM Plex Mono"',
+                '"Source Code Pro"',
+                'SourceCodePro',
+                'Menlo',
+                'Monaco',
+                'Consolas',
+                'monospace',
+            ],
+        },
+    },
+    extend: {
+        colors: {
+            primary: {
+                50: 'hsl(202, 100%, 95%)', // lightest
+                100: 'hsl(204, 100%, 86%)', // lighter
+                200: 'hsl(206, 93%, 73%)',
+                300: 'hsl(208, 88%, 62%)',
+                400: 'hsl(210, 83%, 53%)', // light
+                500: 'hsl(212, 92%, 43%)', // base
+                600: 'hsl(214, 95%, 36%)', // dark
+                700: 'hsl(215, 96%, 32%)',
+                800: 'hsl(216, 98%, 25%)', // darker
+                900: 'hsl(218, 100%, 17%)', // darkest
+            },
+            neutral: {
+                50: 'hsl(216, 33%, 97%)',
+                100: 'hsl(214, 15%, 91%)',
+                200: 'hsl(210, 16%, 82%)',
+                300: 'hsl(211, 13%, 65%)',
+                400: 'hsl(211, 10%, 53%)',
+                500: 'hsl(211, 12%, 43%)',
+                600: 'hsl(209, 14%, 37%)',
+                700: 'hsl(209, 18%, 30%)',
+                800: 'hsl(209, 20%, 25%)',
+                900: 'hsl(210, 24%, 16%)',
+            },
+            red: {
+                50: 'hsl(360, 100%, 95%)',
+                100: 'hsl(360, 100%, 87%)',
+                200: 'hsl(360, 100%, 80%)',
+                300: 'hsl(360, 91%, 69%)',
+                400: 'hsl(360, 83%, 62%)',
+                500: 'hsl(356, 75%, 53%)',
+                600: 'hsl(354, 85%, 44%)',
+                700: 'hsl(352, 90%, 35%)',
+                800: 'hsl(350, 94%, 28%)',
+                900: 'hsl(348, 94%, 20%)',
+            },
+            yellow: {
+                50: 'hsl(49, 100%, 96%)',
+                100: 'hsl(48, 100%, 88%)',
+                200: 'hsl(48, 95%, 76%)',
+                300: 'hsl(48, 94%, 68%)',
+                400: 'hsl(44, 92%, 63%)',
+                500: 'hsl(42, 87%, 55%)',
+                600: 'hsl(36, 77%, 49%)',
+                700: 'hsl(29, 80%, 44%)',
+                800: 'hsl(22, 82%, 39%)',
+                900: 'hsl(15, 86%, 30%)',
+            },
+            cyan: {
+                50: 'hsl(171, 82%, 94%)',
+                100: 'hsl(172, 97%, 88%)',
+                200: 'hsl(174, 96%, 78%)',
+                300: 'hsl(176, 87%, 67%)',
+                400: 'hsl(178, 78%, 57%)',
+                500: 'hsl(180, 77%, 47%)',
+                600: 'hsl(182, 85%, 39%)',
+                700: 'hsl(184, 90%, 34%)',
+                800: 'hsl(186, 91%, 29%)',
+                900: 'hsl(188, 91%, 23%)',
+            },
+            green: {
+                50: 'hsl(125, 65%, 93%)',
+                100: 'hsl(127, 65%, 85%)',
+                200: 'hsl(124, 63%, 74%)',
+                300: 'hsl(123, 53%, 55%)',
+                400: 'hsl(123, 57%, 45%)',
+                500: 'hsl(122, 73%, 35%)',
+                600: 'hsl(122, 80%, 29%)',
+                700: 'hsl(125, 79%, 26%)',
+                800: 'hsl(125, 86%, 20%)',
+                900: 'hsl(125, 97%, 14%)',
+            },
+        },
+    },
+};

tsconfig.json

@@ -1,12 +1,14 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
-    "module": "esnext",
+    "module": "es2015",
     "jsx": "react",
     "strict": true,
+    "noEmit": true,
     "noImplicitReturns": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "sourceMap": true,
     "baseUrl": ".",
     "lib": ["es2015", "dom"],
@@ -14,7 +16,13 @@
       "@/*": [
         "./resources/scripts/*"
       ]
-    }
+    },
+    "plugins": [
+      {
+        "name": "typescript-plugin-tw-template"
+      }
+    ],
+    "typeRoots": ["node_modules/@types"]
   },
   "include": [
     "./resources/scripts/**/*"

webpack.config.js

@@ -12,7 +12,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
 
 let plugins = [
-    new MiniCssExtractPlugin({ filename: isProduction ? 'bundle.[chunkhash:8].css' : 'bundle.[hash:8].css' }),
+    // new MiniCssExtractPlugin({ filename: isProduction ? 'bundle.[chunkhash:8].css' : 'bundle.[hash:8].css' }),
     new AssetsManifestPlugin({
         writeToDisk: true,
         publicPath: true,
@@ -22,25 +22,25 @@ let plugins = [
 ];
 
 if (isProduction) {
-    plugins = plugins.concat([
+    // plugins = plugins.concat([
-        new PurgeCssPlugin({
+    //     new PurgeCssPlugin({
-            paths: glob.sync([
+    //         paths: glob.sync([
-                path.join(__dirname, 'resources/scripts/**/*.tsx'),
+    //             path.join(__dirname, 'resources/scripts/**/*.tsx'),
-                path.join(__dirname, 'resources/views/templates/**/*.blade.php'),
+    //             path.join(__dirname, 'resources/views/templates/**/*.blade.php'),
-            ]),
+    //         ]),
-            whitelistPatterns: [/^xterm/],
+    //         whitelistPatterns: [/^xterm/],
-            extractors: [
+    //         extractors: [
-                {
+    //             {
-                    extractor: class {
+    //                 extractor: class {
-                        static extract (content) {
+    //                     static extract (content) {
-                            return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
+    //                         return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
-                        }
+    //                     }
-                    },
+    //                 },
-                    extensions: ['html', 'ts', 'tsx', 'js', 'php'],
+    //                 extensions: ['html', 'ts', 'tsx', 'js', 'php'],
-                },
+    //             },
-            ],
+    //         ],
-        }),
+    //     }),
-    ]);
+    // ]);
 } else {
     plugins.concat([new ForkTsCheckerWebpackPlugin()]);
 }
@@ -55,7 +55,6 @@ module.exports = {
     },
     entry: [
         'react-hot-loader/patch',
-        './resources/styles/main.css',
         './resources/scripts/index.tsx',
     ],
     output: {
@@ -70,65 +69,20 @@ module.exports = {
             {
                 test: /\.tsx?$/,
                 exclude: /node_modules/,
-                use: [
+                loader: 'babel-loader',
-                    {
+                options: {
-                        loader: 'babel-loader',
+                    cacheDirectory: !isProduction,
-                        options: {
+                },
-                            cacheDirectory: !isProduction,
-                            presets: [
-                                '@babel/typescript',
-                                '@babel/env',
-                                '@babel/react',
-                            ],
-                            plugins: [
-                                'tailwind-components',
-                                'react-hot-loader/babel',
-                                '@babel/transform-runtime',
-                                '@babel/proposal-class-properties',
-                                '@babel/proposal-object-rest-spread',
-                                '@babel/proposal-optional-chaining',
-                                '@babel/proposal-nullish-coalescing-operator',
-                                '@babel/syntax-dynamic-import',
-                            ],
-                        },
-                    },
-                ],
             },
             {
                 test: /\.css$/,
-                include: [
+                // include: [
-                    path.resolve(__dirname, 'resources'),
+                //     path.resolve(__dirname, 'resources'),
-                ],
+                // ],
                 use: [
-                    {
+                    { loader: 'style-loader' },
-                        loader: MiniCssExtractPlugin.loader,
+                    { loader: 'css-loader' },
-                        options: {
-                            hmr: !isProduction,
-                        },
-                    },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            sourceMap: !isProduction,
-                            importLoaders: 1,
-                        },
-                    },
                     { loader: 'resolve-url-loader' },
-                    {
-                        loader: 'postcss-loader',
-                        options: {
-                            ident: 'postcss',
-                            sourceMap: true,
-                            plugins: [
-                                require('postcss-import'),
-                                tailwind('./tailwind.js'),
-                                require('postcss-preset-env')({
-                                    stage: 2,
-                                }),
-                                require('precss'),
-                            ].concat(isProduction ? require('cssnano') : []),
-                        },
-                    },
                 ],
             },
             {
@@ -138,6 +92,11 @@ module.exports = {
                     name: '[name].[ext]?[hash:8]',
                 },
             },
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+            }
         ],
     },
     resolve: {