const?path?=?require("path");

const?HtmlWebpackPlugin?=?require("html-webpack-plugin");

const?{?CleanWebpackPlugin?}?=?require("clean-webpack-plugin");

module.exports?=?{

??entry:?"./src/main.ts",

??output:?{

????path:?path.resolve(__dirname,?"dist"),

????filename:?"main.js",

??},

??devServer:?{

????contentBase:?"/dist",

????open:?true,

??},

??resolve:?{

????extensions:?[".ts",?".js",?".json"],

??},

??module:?{

????rules:?[

??????{

????????test:?/\.css$/,

????????use:?["style-loader",?"css-loader"],

????????exclude:?[path.resolve(__dirname,?"src/components")],

??????},

??????{

????????test:?/\.css$/,

????????use:?[

??????????"style-loader",

??????????{

????????????loader:?"css-loader",

????????????options:?{

??????????????modules:?true,

????????????},

??????????},

????????],

????????exclude:?[path.resolve(__dirname,?"src/components")],

??????},

??????{

????????test:?/\.(eot|woff2|woff|ttf|svg)$/,

????????use:?["file-loader"],

??????},

??????{

????????test:?/\.ts$/,

????????use:?["ts-loader"],

????????exclude:?/node_modules/,

??????},

????],

??},

??plugins:?[

????new?HtmlWebpackPlugin({

??????template:?"./src/index.html",

????}),

????new?CleanWebpackPlugin(),

??],

??mode:?"development",

};

----------------------------------------

import?'./popup.css';?//?全局css操作

//?let?styles?=?require('./popup.css');

//?用interface來定義接口

//?組件配置接口?主要規(guī)范和約束業(yè)務(wù)開發(fā)人員的

interface?Ipopup?{

???width?:?string;

???height?:?string;

???title?:?string;

???pos?:?string;

???mask?:?boolean;

???content?:?()?=>?void;

}

//?組件的接口?規(guī)范開發(fā)人員要按照統(tǒng)一的模式去做

interface?Icomponent?{

???tempContainer:?HTMLElement;

???init:?()?=>?void;

???template:?()?=>?void;

???handle:?()?=>?void;

}

function?popup(options:?Ipopup)?{

???return?new?Popup(options);

}

class?Popup?implements?Icomponent?{

???tempContainer;

???constructor(private?settings:?Ipopup)?{

??????this.settings?=?Object.assign({

?????????width:?'100%',

?????????height:?'100%',

?????????title:?'',

?????????pos:?'center',

?????????mask:?true,

?????????content:?function?()?{?}

??????},?this.settings)

??????this.init()

???}

???//?初始化

???init()?{

??????this.template()

???}

???//?創(chuàng)建模板

???template()?{

??????this.tempContainer?=?document.createElement('div')

??????this.tempContainer.innerHTML?=?`

?????????<h1>hello</h1>

??????`

??????document.body.appendChild(this.tempContainer)

???}

???//?事件操作

???handle()?{?}

}

export?default?popup