webpack4之 ReferenceError: document is not defined

最新推荐文章于 2023-12-05 17:49:24 发布

原创最新推荐文章于 2023-12-05 17:49:24 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了Webpack在处理HTML文件时遇到的问题，特别是在引入html-webpack-plugin插件后的错误解析情况。文章详细解释了错误产生的原因，即html-loader无法解析原HTML文件中的script标签，并提供了注释掉script引入作为临时解决方案。

错误信息如下：

在这里插入图片描述

目录结构

在这里插入图片描述

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>

原因

在之前的操作中，未使用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文件。