webpack 使用babel时，source map不对

Question

webpack 4 + babel 7 + react 16
webpack配置为：devtool: "eval",生成的是下面的这些，sourcemap 貌似不对，怎么解决呢？

const config = {
  mode: "development",
  entry: {
    app: "./src/index.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  resolve: {
    extensions: [".ts", ".js", ".jsx", ".json"]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      title: "Output Management",
      template: "./src/index.html"
    })
  ],
  devtool: "eval",
  devServer: {
    port: 8081,
    contentBase: path.join(__dirname, "dist")
  },
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }]
  }
};

.babelrc

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

源文件：

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <div>hello,world!</div>;
};

ReactDOM.render(<App />, document.getElementById("root"));

// const a = `${234}test`;

const a = 3;

sourcemap:

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/.16.7.0@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_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/.16.7.0@react-dom/index.js");
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);



var App = function App() {
  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, "hello,world!");
};

react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(App, null), document.getElementById("root")); // const a = `${234}test`;

var a = 3;

Answer 1

开放模式下建议用 cheap-module-source-map, 产品模式下用 source-map。

Answer 2

• chrome 浏览器设置中 enabel js souce map
• devtool:'cheap-module-eval-source-map'