[Webpack] Update webpack config to allow typescript files. (#1550)

Author: zozoens31

cfg/base.js

@@ -22,12 +22,6 @@ module.exports = {
   entry: ['./src/entry'],
   module: {
     rules: [
-      {
-        enforce: 'pre',
-        include: path.join(__dirname, 'src'),
-        test: /\.(js|jsx)$/,
-        use: 'eslint-loader',
-      },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
@@ -101,6 +95,6 @@ module.exports = {
       store: srcPath + '/store/',
       styles: srcPath + '/styles/',
     },
-    extensions: ['.js', '.jsx', '_pb.js'],
+    extensions: ['.js', '.jsx', '_pb.js', '.ts', '.tsx', '_pb.d.ts'],
   },
 }

cfg/dev.js

@@ -44,16 +44,17 @@ config.module.rules.push({
   include: [
     path.join(__dirname, '/../src'),
   ],
-  test: /\.(js|jsx)$/,
+  test: /\.[jt]sx?$/,
   use: {
     loader: 'babel-loader',
     options: {
       plugins: [
         'react-hot-loader/babel',
         '@babel/plugin-syntax-dynamic-import',
         ['@babel/plugin-proposal-class-properties', {loose: false}],
+        ['@babel/plugin-proposal-optional-chaining', {loose: false}],
       ],
-      presets: [['@babel/env', {modules: false}], '@babel/react'],
+      presets: [['@babel/env', {modules: false}], '@babel/react', '@babel/typescript'],
     },
   },
 })

cfg/dist.js

@@ -53,8 +53,15 @@ config.module.rules.push({
   include: [
     path.join(__dirname, '/../src'),
   ],
-  test: /\.(js|jsx)$/,
+  test: /\.[jt]sx?$/,
   use: 'babel-loader',
+  options: {
+    plugins: [
+      ['@babel/plugin-proposal-class-properties', {loose: false}],
+      ['@babel/plugin-proposal-optional-chaining', {loose: false}],
+    ],
+    presets: [['@babel/env', {modules: false}], '@babel/react', '@babel/typescript'],
+  }
 })
 
 module.exports = config

cfg/test.js

@@ -1,5 +1,6 @@
 var path = require('path')
 var srcPath = path.join(__dirname, '/../src/')
+var baseConfig = require('./base')
 
 module.exports = {
   devtool: 'eval',
@@ -13,22 +14,23 @@ module.exports = {
       },
       {
         include: [
-          path.join(__dirname, '/../src'),
-          path.join(__dirname, '/../test'),
+          path.join(__dirname, '../src'),
+          path.join(__dirname, '../test'),
         ],
-        test: /\.(js|jsx)$/,
-        use: 'babel-loader',
+        test: /\.[jt]sx?$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [
+              '@babel/plugin-syntax-dynamic-import',
+              ['@babel/plugin-proposal-class-properties', {loose: false}],
+              ['@babel/plugin-proposal-optional-chaining', {loose: false}],
+            ],
+            presets: [['@babel/env', {modules: false}], '@babel/react', '@babel/typescript'],
+          },
+        },
       },
     ],
   },
-  resolve: {
-    alias: {
-      components: srcPath + 'components/',
-      config: srcPath + 'config/' + process.env.REACT_WEBPACK_ENV,
-      images: srcPath + 'images/',
-      store: srcPath + 'store/',
-      styles: srcPath + 'styles/',
-    },
-    extensions: ['.js', '.jsx', '_pb.js'],
-  },
+  resolve: baseConfig.resolve,
 }

server.js

@@ -1,4 +1,4 @@
-/*eslint no-console:0 */
+/* eslint no-console:0 */
 var webpack = require('webpack')
 var WebpackDevServer = require('webpack-dev-server')
 var config = require('./webpack.config')

webpack.config.js

@@ -8,7 +8,7 @@ var args = require('minimist')(process.argv.slice(2))
 var allowedEnvs = ['dev', 'dist', 'test']
 
 // Set the correct environment.
-if(args._.length > 0 && args._.indexOf('start') !== -1) {
+if (args._.length > 0 && args._.indexOf('start') !== -1) {
   process.env.REACT_WEBPACK_ENV = 'test'
 } else if (!process.env.REACT_WEBPACK_ENV) {
   process.env.REACT_WEBPACK_ENV = 'dev'