webpack构建react开发环境

创建mendix组件项目

### nodejs 版本
node -v
v16.15.0
npm -v
8.5.5

### 创建项目
npx @mendix/generator-widget EmptyDemo

　　

 

参考: 

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'))

　　

posted @ 2021-05-18 15:11  qukaige  阅读(84)  评论(0)  编辑  收藏  举报