webpack.config.js
const path = require("path")
const webpack = require("webpack")
const ExtractTextWebapckPlugin = require("extract-text-webpack-plugin") //CSS
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),//
filename: "[name].[hash:8].bundle.js"
},
module: {
rules: [{
test: /\.js|jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
presets: ["react", "env", "stage-0"],
plugins: ["react-hot-loader/babel"]
}
}
},{
test: /\.less$/,
use: ExtractTextWebapckPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
}),
include: path.join(__dirname, "src"),
exclude: /node_modules/
}]
},
devServer: {
contentBase: path.join(__dirname, "src"),
publicPath: "/",
compress: true,
port: 8880,
inline: true,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin()
]
}
index.js
import React from "react"
import ReactDom from "react-dom"
import { hot } from "react-hot-loader"
import App from "./App.jsx"
const Page = hot(module)(App)
console.log(document.getElementById("app"))
ReactDom.render(<Page />, document.getElementById("app"))
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="main.5e3d29b2.bundle.js"></script>
</body>
</html>
after starting webpack-dev-server, the error is reported, and there is only one script, left on the page. The div on it is gone. Why? Ask the great god to solve the doubt