No se puede resolver 'jquery' con TypeScript

Tengo un problema para integrar TypeScript con jQuery en mi proyecto. Instalé tanto @types/jquery como jQuery usando npm, pero no puedo usarlos en mi .ts. Intento importar con:

import jquery from "jquery";
import * as $ from "jquery";
import jquery = require("jquery");
const jquery = require("jquery");
import jquery = require("@types/jquery");

Estas importaciones muestran error en tiempo de compilación:

Module not found: Error: Can't resolve 'jquery'

Mi configuración de webpack:

module.exports = {
  entry: './src/App.ts',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'DQuiz'
    })
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      { test: /\.hbs$/, loader: "handlebars-loader" }
    ]
  },
  resolve: {
    mainFields: ['browserify'],
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Respuesta #1

Probé construir mi proyecto en otra máquina con Ubuntu. Obtengo el mismo error:

Module not found: Error: Can't resolve 'jquery'

Con algunas búsquedas encontré una solución. Para Jquery 3.x, necesitas importar el módulo con 'jquery/src/jquery'.

Uso la solución sugerida por Tan Duong con el plugin proporcionado, creo que esta solución es más elegante para jQuery, entonces para importar, puedes usar:

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery/src/jquery',
            jquery: 'jquery/src/jquery'
        })
    ]
}

Gracias a todos por las respuestas :)

Respuesta #2

Pruébalo

plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'DQuiz'
    }),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    })
],

o puedes seguir la estructura aquí