1

我正在按照这两个教程创建我的第一个反应应用程序和 node.js：

Doc Microsoft（我见过的最糟糕的 MS 文档） Medium.com这个帮助我建立了一个工作站点。

我正在使用visual studio 2019（不是可选的..所以请不要使用VS Code）并运行我的应用程序我运行命令：npx webpack 它生成dist文件夹和“可执行”js。然后我通过 Visual Studio 中的“调试”按钮运行项目。

但现在我想按照 Micorsoft 文档中的说明构建和运行我的网站。秘密似乎在package.json文件和webpack-config.js文件中。

在第一个文件中，我们发现：

"scripts": {
  "clean": "",
  "build": "webpack-cli ./src/app.tsx --config webpack-config.js"
}

在第二个配置。

我的项目和 MS Doc 之间的“唯一”一个区别是该文档使用 Typescript。

这是我的项目：

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    watch: false,
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: './app.js'
        ,
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

包.json

  {
    "name": "my.web.react",
    "version": "0.0.0",
    "description": "My.Web.React",
    "main": "server.js",
    "author": {
      "name": ""
    },
    "dependencies": {
      "@babel/core": "^7.15.0",
      "@babel/preset-react": "^7.14.5",
      "babel-loader": "^8.2.2",
      "express": "^4.17.1",
      "html-webpack-plugin": "^5.3.2",
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "webpack": "^5.49.0",
      "webpack-cli": "^4.7.2"
    },
    "scripts": {
      "clean": "",
      "build": "webpack-cli ./src/index.jsx --config webpack.config.js"
    }
  }

babel.config.json

  {
      "presets": [
          "@babel/preset-react"
      ]
  }

现在，当我单击 Rebuild 时，什么也没有发生： 在此处输入图像描述

还缺少什么？

谢谢

4

0 回答 0