Uncaught Invariant Violation:Target container is not a DOM element

最新推荐文章于 2023-03-29 16:23:20 发布

em....

最新推荐文章于 2023-03-29 16:23:20 发布

阅读量2.4k

点赞数 4

分类专栏： react+webpack4 文章标签： js reactjs webpack webpack4 react

本文链接：https://blog.csdn.net/github_39733638/article/details/88852341

版权

react+webpack4 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目基本配置

dms-vue
    └── config
        └── webpack.config.js
        └── webpack.dev.js
        └── webpack.prod.js
    └── public
        └── index.html
    └── src
        └── index.js
    └── utils
    └── .babelrc
    └── .gitignore
    └── package.json
    └── README.md

问题

在这里插入图片描述

解决方案

网上找到的方法：script标签应该放到body中，待页面元素加载成功之后再加载js

实际操作：

   new HtmlWebpackPlugin({
+   inject: 'body',
    showErrors: true,
    hash: true,
    minify: {
        removeAttributeQuotes: true
    }
}),

inject，默认值是true，参数有 true || 'head' || 'body' || false
当设置为true或者body时，js资源将放在body的底部执行。
当设置为false或者head时，script标签对将放在head元素中
所以，即使不加这一项，js资源也是被放到body元素底部的

最终方案：配置HtmlWebpackPlugin¹下的template

实际操作：

new HtmlWebpackPlugin({
-   inject: 'body',
+   template: path.resolve(__dirname, "../public/index.html"),
    showErrors: true,
    hash: true,
    minify: {
        removeAttributeQuotes: true
    }
}),

template，指本地模板文件的位置，可以是一个绝对或者相对路径
1. 默认是使用 src/index.ejs（如果这个文件存在的话）
2. 你可以编辑自己的模板文件，然后通过 template 配置路径

关于模板文件(题外话)

<!--index.html-->

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

title

在这里插入图片描述

title的配置

在<title></title>标签对中填写
- 配置集中处理，防止项目过大配置分散，可以采用下面在webpack中配置

在webpack.common.js（这是本项目中的文件，文件名字可能与伙伴们的不一样）中配置，模板文件index.html中读取，使用ejs模板语法（<%%>）读取，因为webpack中默认使用ejs-loader

<title><%= htmlWebpackPlugin.options.title %></title>  // index.html
注意!!!是htmlWebpackPlugin，h是小写

// webpack.common.js
	     
new HtmlWebpackPlugin({
+  title: 'rym'
   template: path.resolve(__dirname, "../public/index.html"),
   showErrors: true,
   hash: true,
   minify: {
       removeAttributeQuotes: true
   }
}),

https://github.com/jantimon/html-webpack-plugin ↩︎

em....

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
Uncaught Invariant Violation:Target container is not a DOM element

文章目录Uncaught Invariant Violation:Target container is not a DOM element项目基本配置问题解决方案关于模板文件titleUncaught Invariant Violation:Target container is not a DOM element项目基本配置dms-vue └── config └...
复制链接

扫一扫