reactjs - 反应 Webpack 设置的问题

Question

嗨，我有一个与 webpack 和 babel 捆绑在一起的 react 应用程序，这是我的 webpack.config.js 和 .babelrc

webpack.config.js

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    filename: "index.js",
    path: path.join(__dirname,'./public')
  },
  module: {
    rules:[
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
    ],
  },  
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html',
      filename : 'index.html'
    }),
  ],
}

.babelrc

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

我的 src 文件夹中有这些文件夹

• 1)index.html（供htmlwebpackplugin参考）
• 2）index.js（入口点）
• 3)SampleComponent.jsx（简单的计数器组件）

当我运行npx webpack build --mode development1 它运行并且计数器按钮不起作用

当我将 html 加载器添加到 webpack 配置时，它可以正常工作并为我的反应代码创建一个新的随机 js 文件，请帮助...

标签： reactjswebpackbabeljsbabel-loader