webpack.dev.js

const path = require('path'),
 webpack = require('webpack'),
 HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 mode: 'development',
 entry: {
 app: ["./src/index.tsx"],
 },
 output: {
 path: path.resolve(__dirname, 'build'),
 filename: 'js/[name].bundle.js'
 },

 // 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: [
 {
 test: /\.(ts|tsx)$/,
 loader: 'ts-loader'
 },
 { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
 ]
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin(),
 new HtmlWebpackPlugin({
 inject: false,
 hash: false,
 title: 'MakeCode_Debugger',
 semanticUIPath: 'semantic-ui-css',
 reactPath: 'react',
 reactDomPath: 'react-dom',
 react: 'development',
 template: './src/index.html',
 filename: 'index.html'
 })
 ],
 devServer: {
 contentBase: [
 path.join(__dirname, 'build'),
 path.join(__dirname, 'dist'),
 path.join(__dirname, 'node_modules'),
 ],
 hot: true,
 port: 3000
 },
 // 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"
 }
};