webpack 4 + babel 7 + react 16
webpack is configured as devtool: "eval", and generates the following. Sourcemap seems to be wrong. How to solve it?
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"]
]
}Source file:
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 = /*-sharp__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 = /*-sharp__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;