老师，我这里是什么错，跟视频来的
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来定义接口
// 组件配置接口 主要规范和约束业务开发人员的
interface Ipopup {
width?: string;
height?: string;
title?: string;
pos?: string;
mask?: boolean;
content?: () => void;
}
// 组件的接口 规范开发人员要按照统一的模式去做
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()
}
// 创建模板
template() {
this.tempContainer = document.createElement('div')
this.tempContainer.innerHTML = `
<h1>hello</h1>
`
document.body.appendChild(this.tempContainer)
}
// 事件操作
handle() { }
}
export default popup
