Благодаря этому видео, у меня получилось создать React приложение в админке MODx под названием msWidgets. Но не без проблем. Сейчас расскажу как.
[Обновлено] Сама разработка пакета в данном его исполнении не совсем является реактивной (быстро изменяющейся). Его сначала необходимо запустить на тестовом порту (обычно это localhost:3000, npm run dev), а уже в конце разработки компонента скорее всего придется "добивать" в build режиме (npm run create). Правда, это зависит от самой структуры вашего приложения. Возможно, это и не понадобится вовсе.
package.json:
{
"name": "TestComponent",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
},
"directories": {
"doc": "docs"
},
"dependencies": {
"axios": "^1.2.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.57.1",
"sass-loader": "^13.2.0"
},
"devDependencies": {
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"scripts": {
"dev": "webpack-dev-server",
"create": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'js'),
filename: 'index_pack.js'
},
module: {
rules: [
{test: /\.(js)$/, use: 'babel-loader'},
{
test: /\.(scss|less|css)$/,
use: ["style-loader", "css-loader", 'sass-loader']
}
]
},
mode: 'production',
plugins: [
new HtmlWebpackPlugin({
template: 'templates/default/index.html'
})
],
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
}
}