如何删除 webpack 中的和谐注释并隐藏代码

Question

我正在构建一个个人应用程序，以学习如何在不使用 create-react-app 工具的情况下进行构建，这非常困难，但我现在就在那里。 但是，当我在 DevTools 中查看我的代码时，我看到很多/* harmony import */和 Webpack 函数等围绕着我的代码。 是否有 webpack 配置选项来删除这些东西？ 当我使用 create-react-app 工具时，我从来没有看到这一点。

在我的代码之上

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/esm/react-router-dom.js");
/* harmony import */ var _components_List__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/List */ "./components/List.js");
/* harmony import */ var _components_Menu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/Menu */ "./components/Menu.js");
/* harmony import */ var _pages_AddUser__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../pages/AddUser */ "./pages/AddUser.js");
/* harmony import */ var _sass_main_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../sass/main.scss */ "./sass/main.scss");
/* harmony import */ var _sass_main_scss__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_sass_main_scss__WEBPACK_IMPORTED_MODULE_5__);
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

我的代码底部

return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
    className: "container"
  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Menu__WEBPACK_IMPORTED_MODULE_3__["default"], {
    toggle: toggle,
    slidein: slidein,
    openMenu: openMenu
  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
    className: "position"
  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["Route"], {
    path: "/",
    exact: true,
    component: _components_List__WEBPACK_IMPORTED_MODULE_2__["default"]
  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["Route"], {
    path: "/add-user",
    component: _pages_AddUser__WEBPACK_IMPORTED_MODULE_4__["default"]
  })));
}

/* harmony default export */ __webpack_exports__["default"] = (App);

Answer 1

实际上这是 webpack 的正确 output。 您在create-react-app中看不到这一点，因为source-maps是在构建期间生成的。 您可以在 webpack 配置中启用source map生成，以便在开发工具中正确映射到您的代码。

一些要阅读的资源： https://webpack.js.org/configuration/devtool/