Use webpack to compile React written in TypeScript and launch BrowserSync

Author: averaart

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+!dist/index.html

package.json

@@ -0,0 +1,22 @@
+{
+  "scripts": {
+    "dev": "webpack-dev-server --progress --colors",
+    "start": "webpack && npm run dev"
+  },
+  "dependencies": {
+    "@types/react": "^16.4.14",
+    "@types/react-dom": "^16.0.7",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2"
+  },
+  "devDependencies": {
+    "awesome-typescript-loader": "^5.2.1",
+    "browser-sync": "^2.24.7",
+    "browser-sync-webpack-plugin": "^2.2.2",
+    "source-map-loader": "^0.2.4",
+    "typescript": "^3.0.3",
+    "webpack": "^4.19.1",
+    "webpack-cli": "^3.1.1",
+    "webpack-dev-server": "^3.1.8"
+  }
+}

src/components/Hello.tsx

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export interface HelloProps { compiler: string; framework: string; }
+
+export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

src/index.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { Hello } from "./components/Hello";
+
+ReactDOM.render(
+    <Hello compiler="TypeScript" framework="React" />,
+    document.getElementById("example")
+);

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+      "outDir": "./dist/",
+      "sourceMap": true,
+      "noImplicitAny": true,
+      "module": "commonjs",
+      "target": "es5",
+      "lib": ["es5", "es6", "dom"],
+      "jsx": "react"
+  },
+  "include": [
+      "./src/**/*"
+  ]
+}

webpack.config.js

@@ -0,0 +1,52 @@
+const path = require('path');
+
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
+
+
+module.exports = {
+  entry: './src/index.tsx',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  // Enable sourcemaps for debugging webpack's output.
+  devtool: "source-map",
+
+  resolve: {
+    // Add '.ts' and '.tsx' as resolvable extensions.
+    extensions: [".ts", ".tsx", ".js", ".json"]
+  },
+
+
+  module: {
+    rules: [
+      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
+      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
+
+      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
+    ]
+  },
+
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+  },
+  // When importing a module whose path matches one of the following, just
+  // assume a corresponding global variable exists and use that instead.
+  // This is important because it allows us to avoid bundling all of our
+  // dependencies, which allows browsers to cache those libraries between builds.
+  externals: {
+    // "react": "React",
+    // "react-dom": "ReactDOM"
+  },
+
+  plugins: [
+    new BrowserSyncPlugin({
+      host: 'localhost',
+      port: 3000,
+      proxy: 'http://localhost:8080/',
+      files: ['./dist/**/*'],
+      browser: 'google chrome'
+    })
+  ]
+};