demo: Update to the latest webpack

Author: IvanGoncharov

demo/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  var content: any;
+  export = content;
+}

demo/index.tsx

@@ -53,7 +53,7 @@ const defaultTabConfig = {
   variables: ''
 };
 
-export class Demo extends React.Component<null, any> {
+export class Demo extends React.Component<{}, any> {
   constructor(props) {
     super(props);
     let config = new AppConfig("graphiql", workspaceOptions);

demo/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "sourceMap": true,
+    "target": "es5",
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "lib": ["es2017", "dom"],
+    "jsx": "react",
+    "esModuleInterop": true
+  },
+  "include": ["./custom.d.ts", "**/*.tsx", "**/*.ts"]
+}

demo/webpack.demo.js

@@ -1,45 +1,38 @@
-const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const path = require('path');
-
-function root(args) {
-  args = Array.prototype.slice.call(arguments, 0);
-  return path.join.apply(path, [__dirname].concat(args));
-}
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   devtool: 'source-map',
-  performance: {
-    hints: false
-  },
   devServer: {
-    contentBase: root('.'),
+    contentBase: __dirname,
     watchContentBase: true,
     port: 9005,
-    stats: 'errors-only'
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json']
-  },
-  entry: ['./demo/index.tsx'],
-  output: {
-    path: root('.'),
-    filename: 'bundle.js',
-    sourceMapFilename: '[file].map'
   },
+  entry: './demo/index.tsx',
+  plugins: [new MiniCssExtractPlugin({ filename: 'bundle.css' })],
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        use: ['awesome-typescript-loader'],
+        use: 'ts-loader',
+        exclude: /node_modules/,
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({ use: 'css-loader' }),
+        use: [
+          'style-loader',
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+        ],
       },
     ],
   },
-  plugins: [
-    new ExtractTextPlugin({filename: 'bundle.css', allChunks: true}),
-  ]
-}
+  resolve: {
+    extensions: ['.tsx', '.ts', '.mjs', '.js'],
+  },
+  output: {
+    path: __dirname,
+    filename: 'bundle.js',
+    sourceMapFilename: '[file].map'
+  },
+};

manual-types.d.ts

@@ -40,20 +40,20 @@
     "@types/lodash-es": "4.17.3",
     "@types/react": "15.6.28",
     "@types/react-dom": "15.5.12",
-    "@types/webpack": "3.8.19",
-    "awesome-typescript-loader": "3.5.0",
-    "css-loader": "0.28.7",
+    "css-loader": "4.2.1",
     "deploy-to-gh-pages": "1.3.7",
-    "extract-text-webpack-plugin": "3.0.2",
     "graphiql": "0.11.10",
     "graphiql-workspace": "github:apis-guru/graphiql-workspace#tab-fork-dist",
+    "mini-css-extract-plugin": "^0.10.0",
     "react": "15.5.4",
     "react-dom": "15.5.4",
     "react-modal": "3.11.2",
     "rimraf": "2.7.1",
-    "style-loader": "0.19.1",
-    "typescript": "2.9.2",
-    "webpack": "3.12.0",
-    "webpack-dev-server": "2.11.5"
+    "style-loader": "1.2.1",
+    "ts-loader": "^8.0.3",
+    "typescript": "3.6.3",
+    "webpack": "4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "3.11.0"
   }
 }

package.json

@@ -3,7 +3,6 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "module": "es2015",
-    "moduleResolution": "node",
     "target": "es5",
     "noImplicitAny": false,
     "noUnusedLocals": true,
@@ -12,25 +11,14 @@
     "declaration": true,
     "outDir": "lib",
     "pretty": true,
-    "types": [
-      "webpack"
-    ],
-    "lib": ["es2017", "DOM", "esnext.asynciterable"],
-    "jsx": "react"
+    "moduleResolution": "node",
+    "lib": ["es2017"]
   },
   "compileOnSave": false,
   "exclude": [
+    "demo",
     "node_modules",
     ".tmp",
     "lib"
-  ],
-  "include": [
-    "./src/**/*.ts",
-    "./src/**/*.tsx",
-    "./manual-types.d.ts"
-  ],
-  "awesomeTypescriptLoaderOptions": {
-    "resolveGlobs": true,
-    "useWebpackText": true
-  }
+  ]
 }

tsconfig.json

@@ -1,22 +1,13 @@
-const webpack = require('webpack');
 const path = require('path');
 
-function root(args) {
-  args = Array.prototype.slice.call(arguments, 0);
-  return path.join.apply(path, [__dirname].concat(args));
-}
-
 module.exports = {
   devtool: 'source-map',
-  performance: {
-    hints: false
-  },
+  entry: ['./src/index.ts'],
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json']
+    extensions: ['.tsx', '.ts', '.mjs', '.js'],
   },
-  entry: ['./src/index.ts'],
   output: {
-    path: root('lib'),
+    path: path.join(__dirname, 'lib'),
     filename: 'graphql-lodash.bundle.js',
     sourceMapFilename: '[file].map',
     library: 'GQLLodash',
@@ -26,10 +17,9 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
-        use: [
-          'awesome-typescript-loader'
-        ]
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
       }
     ]
   }