webpacck打包完react后引入到html文件中报错:Target container is not a DOM element...

标签：报错   use   meta   entry   打开   ports   bundle   程序   spec   

手动写了一个react程序，用webpack打包后生成了一个bundle,js文件，然后引入到index.html文件夹后，在浏览器打开该html文件，报错Target container is not a DOM element，一直找原因发现是引入bundle.js的顺序不对，应该放在div元素的下方，下面具体看代码

react相关js内容

var React = require(‘react‘);
var ReactDom = require(‘react-dom‘);
const element =

package.json内容

{
"name": "start",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "set NODE_ENV=dev && webpack-dev-server --progress --colors"
},
"author": "shen",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.7.7",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.4",
"webpack-dev-server": "^3.10.1"
},
"devDependencies": {}
}

webpack.config.js内容

var webpack = require(‘webpack‘);
var path = require(‘path‘);
module.exports = {
mode: ‘development‘,
entry: path.resolve(__dirname,‘main/js/index.js‘),
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: ‘babel-loader‘
}]
}]
},
output: {
filename: ‘bundle.js‘
}
}

.babelrc文件内容

{
"presets": ["@babel/react"],
"env": {
"dev": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}

index.html内容

//这里一般是会放在head里，就回报错Target container is not a DOM element...，放到元素下边就好了

webpacck打包完react后引入到html文件中报错:Target container is not a DOM element...

标签：报错   use   meta   entry   打开   ports   bundle   程序   spec   

原文地址：https://www.cnblogs.com/shenwh/p/12105147.html