Javascript Chrome开发工具上的Webpack和Babel配置问题

我试图建立一个新的项目，我希望它有网页包和巴贝尔，应用程序的工作，刷新网页，但我有什么问题，我在Chrome开发工具。我尝试添加babel插件添加模块导出。我希望在源代码中看到与代码中相同的内容。我错过了什么

例如，我的文件Contact.js看起来：

 
const Contact = () => {
    return (
       <div>
          <h1>Contact US</h1>
          <p>Contact US page body content</p>
       </div>
    );
}
 
export default Contact;

webpack.config.js

import HtmlWebPackPlugin from 'html-webpack-plugin';

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

package.json：

{
  "name": "newstart",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development --env development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-add-module-exports": "^1.0.4",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^5.0.0-alpha.6",
    "webpack": "^5.1.3",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "bootstrap": "^4.5.3",
    "react": "^17.0.0",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^5.2.0"
  }
}

.LRC：

{
    "presets": [
      "@babel/preset-env", 
      "@babel/preset-react"],
      
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }

---

正如Matti提到的，您将需要源地图，详细信息可在官方网站的网页上找到

你的网页看起来像是添加了devtool:“源地图”

import HtmlWebPackPlugin from 'html-webpack-plugin';

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
devtool: 'source-map',
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

---

这就是webpack所做的，它将所有模块捆绑在一起。如果您想调试脚本，建议您将webpack build sourcemaps与之一起使用，这样它就可以将编译后的代码“映射”回原始JS文件。

import HtmlWebPackPlugin from 'html-webpack-plugin';

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
devtool: 'source-map',
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};