使用react-hot-loader之后报错“target container is not a Dom Element"?

Question

使用react-hot-loader之后报错“target container is not a Dom Element"?

发布于
2018-07-15

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>

启动webpack-dev-server之后报错，页面只剩下一个script，上面的div没了，这是为什么呢？求大神解惑

javascript react webpack webpack-dev-server

阅读 2.1k

1 个回答

✓ 已被采纳

HtmlWebpackPlugin的配置有问题吧

撰写回答