webpack.config.js

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const isProduction = (process.argv.indexOf('process.env.NODE_ENV=production') >= 0)

module.exports = {
  // tell webpack where to loacate manifest-loader.js
  resolveLoader: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['.js', '.json', '.ts', '.tsx']
  },

  entry: {
    content: './src/content.ts',
    'hot-reload': './src/hot-reload.js',
    popup: './src/popup.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: {
        loader: 'ts-loader'
      }
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      })
    }, {
      test: /manifest\.json$/,
      use: [
        {
          loader: 'file-loader',
          options: { name: '[name].[ext]' }
        },
        'manifest-loader'
      ]
    }, {
      test: /\.html$/,
      use: {
        loader: 'html-loader'
      }
    }, {
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'file-loader',
        options: { name: '[name].[ext]' }
      }
    }]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new ExtractTextPlugin('content.bundle.css'),
    new HtmlWebpackPlugin({
      inject: 'body',
      chunks: ['popup'],
      filename: 'popup.html',
      template: './src/popup.html'
    })
  ]
}

if (isProduction) {
  delete module.exports.entry['hot-reload']
}