javascript - webpack - 引用错误 : document is not defined

Question

tl;dr:Webpack 无法编译，我不知道为什么当一切看起来语法正确时，我也不完全理解这个错误意味着什么。
尝试使用 webpack。完全披露:对此真的很陌生(一般是 js/前端)。我终于解决了我遇到的其他错误(主要是指向错误的文件路径或语法错误)。我按照 youtube 视频进行设置，事后看来这可能不是最好的主意，但我需要从某个地方开始，观看比阅读更容易。无论如何，所以我遵循了这一点并让事情发生了变化。用 npm 安装了所有东西(见下面的 package.json)并创建了 src/dist 等等。我是不是 使用 React/Angular/Vue 等，只是普通的普通旧 Vanilla javascript。我在 Linux 上，如果这有什么不同的话(我想不会)。
然后我遇到了这个错误:

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/alan/dev/privateFolder/shrektime
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 91bf4b6307b254c69adc
Version: webpack 4.44.1
Time: 1110ms
Built at: 04/09/2020 04:20:38
                               Asset      Size  Chunks                         Chunk Names
                    .dist/index.html  1.39 KiB          [emitted]              
55e664c36a02d03a083764a7c577f012.png  17.2 KiB          [emitted] [immutable]  
                           bundle.js   374 KiB    main  [emitted]              main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/js/components/Calendar.js] 1.18 KiB {main} [built]
[./src/js/components/Input.js] 171 bytes {main} [built]
[./src/js/components/Results.js] 603 bytes {main} [built]
[./src/js/handlers/base.js] 356 bytes {main} [built]
[./src/main.js] 2.7 KiB {main} [built]
    + 23 hidden modules

ERROR in   Error: /home/alan/dev/privateFolder/shrektime/node_modules/style-loader/dist/runtime/injectStylesIntoSty  leTag.js?:93
    var style = document.createElement('style');
                ^
  ReferenceError: document is not defined
  
  - injectStylesIntoStyleTag.js?:93 insertStyleElement
    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:93:15
  
  - injectStylesIntoStyleTag.js?:208 addStyle
    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:208:13
  
  - injectStylesIntoStyleTag.js?:81 modulesToDom
    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:81:18
  
  - injectStylesIntoStyleTag.js?:239 module.exports
    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:239:25
  
  - style.css?:15 eval
    /home/alan/dev/privateFolder/shrektime/src/style.css?:15:14
  
  - index.html:240 Object../src/style.css
    /home/alan/dev/privateFolder/shrektime/src/index.html:240:1
  
  - index.html:21 __webpack_require__
    /home/alan/dev/privateFolder/shrektime/src/index.html:21:30
  
  - loader.js:3 eval
    [index.html?.]/[html-webpack-plugin]/lib/loader.js:3:34
  
  - index.html:133 Object../node_modules/html-webpack-plugin/lib/loader.js!./src    /index.html
    /home/alan/dev/privateFolder/shrektime/src/index.html:133:1
  
  - index.html:21 __webpack_require__
    /home/alan/dev/privateFolder/shrektime/src/index.html:21:30
  

Child HtmlWebpackCompiler:
                                   Asset      Size  Chunks                         Chunk Names
    55e664c36a02d03a083764a7c577f012.png  17.2 KiB          [emitted] [immutable]  
     + 1 hidden asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/css-loader/dist/cjs.js!./src/style.css] 5.29 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/html-loader/dist/runtime/getUrl.js] 548 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 4.34 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js] 6.64 KiB {HtmlWebpackPlugin_0} [built]
    [./src/img/icons8-shrek-256.png] 80 bytes {HtmlWebpackPlugin_0} [built]
    [./src/js/components/Calendar.js] 1.18 KiB {HtmlWebpackPlugin_0} [built]
    [./src/js/components/Input.js] 171 bytes {HtmlWebpackPlugin_0} [built]
    [./src/js/components/Results.js] 603 bytes {HtmlWebpackPlugin_0} [built]
    [./src/js/handlers/base.js] 356 bytes {HtmlWebpackPlugin_0} [built]
    [./src/js/handlers/dateHandler.js] 1.97 KiB {HtmlWebpackPlugin_0} [built]
    [./src/main.js] 2.7 KiB {HtmlWebpackPlugin_0} [built]
    [./src/style.css] 519 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Failed to compile.

这是我的 package.json

{
  "name": "shrektime",
  "version": "1.0.0",
  "description": "A stupid idea gone too far",
  "main": "main.js",
  "type": "module",
  "dependencies": {
    "fractional": "^1.0.0",
    "lodash": "^4.17.20",
    "moment": "^2.27.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.2.2",
    "file-loader": "^6.1.0",
    "html-loader": "^1.3.0",
    "html-webpack-plugin": "^4.4.1",
    "mini-css-extract-plugin": "^0.11.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "scripts": {
    "compile:sass": "node-sass src/sass/main.scss src/style.css -w",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode-development --open"
  },
  "author": "Alan Nardo",
  "license": "ISC"
}

在我的 main.js文件夹我有这样导入的 CSS 和 Sass:

import sass from './sass/main.scss';
import css from './style.css';

最后是我的 webpack.config.js文件:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {

    entry: "./src/main.js",
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: { loader: "babel-loader" }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    { loader: "file-loader" }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: ".dist/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
};

这是我的文件夹结构的图像:

Answer 1

我刚刚解决了这个问题，但没有在stackoverflow上找到答案。
所以在这里我是如何引起这个问题的:
在 webpack 中，在您的加载程序部分，如果您遗漏了规则的“测试”部分，
您可能会触发此错误。
问题是，webpack 会调用你的加载器
在错误类型的文件上，并给出这样的错误。

..
module: { 
  rules: [
    { 
      test: /\.ts$/, 
      use: 'ts-loader', exclude: /node_modules/ 
    },
  ] 
}
..

(我知道上述问题包含测试，但我的声誉太低，无法发表评论，我相信了解错误的根本原因与弄清楚如何解决它们有关。我不喜欢无法解释的“我做过的事”现在它起作用了!!各种答案。)