webpack4之 ReferenceError: document is not defined

错误信息如下:

webpack4之 ReferenceError: document is not defined_第1张图片

目录结构

webpack4之 ReferenceError: document is not defined_第2张图片

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文件

webpack4之 ReferenceError: document is not defined_第3张图片

解决操作

注释掉以下引入即可:

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

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

你可能感兴趣的:(webpack)