webpack4之 ReferenceError: document is not defined

最新推荐文章于 2024-05-29 11:15:18 发布

daodaoke

最新推荐文章于 2024-05-29 11:15:18 发布

阅读量8k

点赞数 2

分类专栏： webpack

原文链接：https://blog.csdn.net/VOID_Pointer_G/article/details/106820736

版权

webpack 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

错误信息如下：

在这里插入图片描述

目录结构

在这里插入图片描述

Webpack版本号

在这里插入图片描述

HTML文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <article class="red">nihao</article>
  <div id="small"></div>
  <div id="big"></div>
  <img src="./img/233kb.jpg" alt="">
  <img src="./img/348kb.jpg" alt="">
  <img src="./img/min.png" alt="">
  <script src="../dist/bundle.js"></script>
</body>

</html>

webpack.config.js文件

在这里插入图片描述

解决操作

注释掉以下引入即可：

<script src="../dist/bundle.js"></script>

 
 
 
 1

原因

在之前的操作中，未使用html-webpack-plugin 插件打包输出HTML,测试的时候仍旧是在原来的index.html文件中运行检测，因此不报错；
webpack打包顺序：通过入口文件开始打包，html-loader解析HTML文件中的图片文件，style-loader、css-loader处理样式文件，url-loader解析样式中的图片路径问题，file-laoder处理其他文件格式，Plugins中的html-webpack-plugin则负责打包HTML文件;
html-loader 解析的是原HTML文件中的图片文件，因此原HTML文件中引入的script标签无法解析，就会报错；
使用了 html-webpack-plugin打包工具之后，webpack配置打包的时候，就会报错，html- webpack-plugin的本质是创建一个空的HTML文件，找到template下的文件复制到这个空的 HTML文件中，再将打包好的其他资源全部引入这个空的HTML文件。