webpack.config.js

module.exports = {
  entry: {
    main: './src/main.ts',
    background: './src/extension-contexts/background.ts',
    popup: './src/extension-contexts/popup.tsx',
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist/js',
  },

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{ loader: 'babel-loader' }],
        exclude: /node_modules/,
      },
    ],
  },

  optimization: {
    // no minimize for chrome extension
    minimize: false,
  },

  // 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"
  // }
};