参考:
https://www.cnblogs.com/xps-03/p/12421600.html
package.json
{
"name": "labellist",
"widgetName": "LabelList",
"version": "1.0.0",
"description": "My widget description",
"copyright": "2020 Mendix Technology BV",
"author": "kaige",
"engines": {
"node": ">=12"
},
"config": {
"projectPath": "../Portal-main/",
"mendixHost": "http://localhost:8080",
"developmentPort": "3000"
},
"packagePath": "mendix",
"scripts": {
"start": "pluggable-widgets-tools start:web",
"build": "pluggable-widgets-tools build:web",
"lint": "pluggable-widgets-tools lint",
"lint:fix": "pluggable-widgets-tools lint:fix",
"prerelease": "npm run lint",
"release": "pluggable-widgets-tools release:web",
"kgbuild": "webpack --mode production",
"server": "webpack-dev-server --mode development --open"
},
"license": "Apache-2.0",
"devDependencies": {
"@babel/core": "^7.14.2",
"@babel/preset-env": "^7.14.2",
"@babel/preset-react": "^7.13.13",
"@mendix/pluggable-widgets-tools": "^8.18.1",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.4",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.0",
"less": "^2.7.2",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"antd": "^4.15.5",
"classnames": "^2.2.6"
}
}
webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path')
module.exports = {
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
},
entry: './src/index.jsx',
devServer: {
contentBase: path.join(__dirname, './src/'),
publicPath: '/',
host: '127.0.0.1',
port: 3000,
stats: {
colors: true
}
},
module: {
rules: [
{
test: /.(svg)(?.*)?$/,
use: ['file-loader']
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
},
{
test: /(.css)$/,
use: ['style-loader', 'css-loader']
},
{
test: /.jsx?$/, // jsx/js文件的正则
exclude: /node_modules/, // 排除 node_modules 文件夹
use: {
// loader 是 babel
loader: 'babel-loader',
options: {
// babel 转义的配置选项
babelrc: false,
presets: [
// 添加 preset-react
require.resolve('@babel/preset-react'),
[require.resolve('@babel/preset-env'), { modules: false }]
],
cacheDirectory: true
}
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: 'public/index.html',
filename: 'index.html',
inject: true
})
]
};
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
</head>
<body>
<div id="root"></div>
</body>
</html>
src/index.jsx
import ReactDOM from 'react-dom'
import React from 'react'
import LabelList from './LabelList.jsx'
ReactDOM.render(
<h1>hello</h1>
// <LabelList sampleText='aaaaaa'/>
, document.getElementById('root'))