webpack.config.js

   1 const path = require('path');
   2
   3 module.exports = {
   4     mode: "production",
   5
   6     // Enable sourcemaps for debugging webpack's output.
   7     devtool: "source-map",
   8
   9     resolve: {
  10         // Add '.ts' and '.tsx' as resolvable extensions.
  11         extensions: [".ts", ".tsx"]
  12     },
  13
  14         entry: "./src/app.tsx",
  15
  16         output: {
  17                 // options related to how webpack emits results
  18                 path: path.resolve(__dirname, "dist"), // string
  19                 // the target directory for all output files
  20                 // must be an absolute path (use the Node.js path module)
  21                 filename: "react-render.js", // string
  22         },
  23
  24     module: {
  25         rules: [
  26             {
  27                 test: /\.ts(x?)$/,
  28                 exclude: /node_modules/,
  29                 use: [
  30                     {
  31                         loader: "ts-loader"
  32                     }
  33                 ]
  34             },
  35             // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
  36             {
  37                 enforce: "pre",
  38                 test: /\.js$/,
  39                 loader: "source-map-loader"
  40             }
  41         ]
  42     },
  43
  44     // When importing a module whose path matches one of the following, just
  45     // assume a corresponding global variable exists and use that instead.
  46     // This is important because it allows us to avoid bundling all of our
  47     // dependencies, which allows browsers to cache those libraries between builds.
  48     externals: {
  49         "react": "React",
  50         "react-dom": "ReactDOM"
  51     }
  52 };