html文件中引入＜link/＞标签,webpack打包报错：document is not defined

一、问题

1. 在index.html文件中引入<link  href="./css/index.css' rel="stylesheet">标签渲染index.html文件的样式,webpack打包时报错：var style=document.createElement('style')'; ReferenceError:document is not defined

具体错误如下：

ERROR in   Error: webpack-internal:///./node_modules/styl  e-loader/dist/runtime/injectStylesIntoStyleTag  .js:93
    var style = document.createElement('style'); 
               ^
  ReferenceError: document is not defined        

  - injectStylesIntoStyleTag.js:93 insertStyleEl 
   ement
    [.]/[style-loader]/dist/runtime/injectStyles 
   IntoStyleTag.js:93:15

  - injectStylesIntoStyleTag.js:208 addStyle     
    [.]/[style-loader]/dist/runtime/injectStyles 
   IntoStyleTag.js:208:13

  - injectStylesIntoStyleTag.js:81 modulesToDom  
    [.]/[style-loader]/dist/runtime/injectStyles 
   IntoStyleTag.js:81:18

  - injectStylesIntoStyleTag.js:239 module.expor 
   ts
    [.]/[style-loader]/dist/runtime/injectStyles 
   IntoStyleTag.js:239:25

  - index.css:16 eval
    webpack-internal:///./src/css/index.css:16:1 
   20

  - index.html:85 Object../src/css/index.css     
    F:/reactLearning2/animation/src/index.html:8 
   5:1

  - index.html:119 __webpack_require__
    F:/reactLearning2/animation/src/index.html:1 
   19:41

  - index.html:3 eval
    [.]/[html-webpack-plugin]/lib/loader.js!./sr 
   c/index.html:3:34

  - index.html:74 Object../node_modules/html-web 
   pack-plugin/lib/loader.js!./src/index.html    
    F:/reactLearning2/animation/src/index.html:7 
   4:1

  - index.html:119 __webpack_require__
    F:/reactLearning2/animation/src/index.html:1 
   19:41



webpack 5.24.3 compiled with 1 error in 1489 ms  
i ｢wdm｣: Failed to compile.

二、解决方法及出错原因

1. 出错原因：webpack本身只能打包js和json文件,我们通过配置babel和plugin使得它能够处理入口文件所在chunk下的样式和图片以及其他资源。如果把样式文件直接放入html文件中,又不设置html文件为打包入口文件,则样式文件不会被webpack打包,webpack打包运行时无法识别没有被解析翻译的样式文件,所以会报错。
2. document is not defined:是因为document属性是在<script></script>标签中才有的（在js文件中生效），webpack可以处理js资源，但是link引入的资源写在非入口文件的所在的chunk下的文件，webpack不对其进行解析处理,也没有其他工具对该资源进行处理，所以报错“找不到document"——即找不到可以编译处理该样式资源的工具
3. 解决方法：

• case1:删除html文件中的link标签,在打包的入口文件或打包的入口文件所在的chunk中的任一文件中通过 import './css/index.css' 引入

• case2:设置html文件为打包入口文件

• 一般不推荐将html文件设置为打包入口文件,所以推荐使用case1

三、总结

1. 并不是说webpack打包时html文件中不可以引入link标签,而是引入的资源webpack无法解析才会报错
2. 当使用cdn链接时,就可以在html中文件中引入link标签添加cdn链接,因为webpack可以解析cdn链接

 

 

    希望对你有帮助！

   如有错误,欢迎指正！