Webpack configuration, do not need to configure the Externals,webpack specific configuration as follows,
Const WEBPACK = require (' Webpack '); const PATH = require (' path '); const Htmlwebpackplugin = require (' Html-webpack-plugin ' const {Checkerplugin} = require (' Awesome-typescript-loader ')//Set dev environment or pro environment Const WEBPACK_ENV = Process.env.WEBPACK _env | | ' Dev ';//Babel configuration, content with. babelrc File Const Babeloptions = {"Presets": [["env", {"targets": {"browser S ": [" Last 2 Versions "," Safari >= 7 "]},]]};//htmlwebpackplugin default configuration var gethtmlconfig = function (name , title) {return {Template: './src/views/' + name + '. html ', FileName: './views/' + name + '. html ',//Favicon : './favicon.ico ', Title:title, Inject:true, Hash:true,};};/ /Get page address var getinitentrymodal = function (name) {return [Path.join (__dirname, './src/pages/' + name + '. ts ')];} Ts-loader Configuration Const Tsloaderoptions = {Transpileonly:true};module.exports = {entry: {' index ': Getinitentrymodal ( ' Index '),}, Output: {filename: './scripts/[name].js ', Path:path.join(__dirname, './dist '),}, Resolve: {extensions: [". Webpack.js", ". Web.js", ". ts", ". TSX", ". js"]}, module: { Rules: [{test:/\.ts (x?) $/, exclude:/node_modules/, use: [{loader: ' Ts-loader ', options:tsloaderoptions},/ /{loader: ' Awesome-typescript-loader '}//{loader: ' Babel-loader ', options:babeloptions},],} {test:/\.js$/, enforce: "Pre", Loader: "Source-map-loader"},//{enforce: ' pre ', test:/\.tsx?$/, use: "s Ource-map-loader "},//{test:/\.tsx?$/, Loader: ' Awesome-typescript-loader ', exclude:/node_modules/},],}, To load an external variable or module into a. ts file to reference jquery, the following code masks//externals: {//' jquery ': ' window.jquery ',//}, Devtool: "Source-map", Plugins: [//New Webpack. Loaderoptionsplugin ({//options: {resolve: {extensions: [". ts", ". TSX", ". js"]}}//}), New Htmlwebpackplu Gin (gethtmlconfig (' index ', ' Index '),], Devserver: {Contentbase:path. Join (__dirname, './dist '), port:9000,//Host: ' 192.168.81.1 ', Open:false, Hot:false, Inline:true, Compress:true,},}
jquery Code Test
import $ = require("jquery");export class App { public addComment(): void { let creatAt = new Date(); $("#main").append("<div><span>new comment pushed at." + creatAt.toTimeString() + "</span>"); }}let app = new App();$(() => { $("#btn-add").click(app.addComment);});
Typescript how to introduce jquery