webpack - ReferenceError：文档未定义

Question

tl;dr：Webpack 无法编译，我不确定为什么所有内容在语法上看起来都是正确的，而且我也不完全理解这个错误意味着什么。

\n

尝试使用 webpack。全面披露：对此确实很陌生（一般来说是js/前端）。我终于解决了我遇到的其他错误（主要是指向错误的文件路径或语法错误）。我按照 YouTube 视频进行了设置，事后看来这可能不是最好的主意，但我需要从某个地方开始，而且观看比阅读更容易。无论如何，我遵循了这一点并让事情发生了。使用 npm 安装所有内容（见package.json下文）并创建 src/dist 等。我没有使用 React/Angular/Vue 等，只是使用普通的普通旧式 JavaScript。我使用的是 Linux，如果这有什么区别的话（我想不会）。

\n

然后我遇到了这个错误：

\n

\xe2\x84\xb9 \xef\xbd\xa2wds\xef\xbd\xa3: Project is running at http://localhost:8080/\n\xe2\x84\xb9 \xef\xbd\xa2wds\xef\xbd\xa3: webpack output is served from /\n\xe2\x84\xb9 \xef\xbd\xa2wds\xef\xbd\xa3: Content not from webpack is served from /home/alan/dev/privateFolder/shrektime\n\xe2\x84\xb9 \xef\xbd\xa2wdm\xef\xbd\xa3: wait until bundle finished: /\n\xe2\x9c\x96 \xef\xbd\xa2wdm\xef\xbd\xa3: Hash: 91bf4b6307b254c69adc\nVersion: webpack 4.44.1\nTime: 1110ms\nBuilt at: 04/09/2020 04:20:38\n                               Asset      Size  Chunks                         Chunk Names\n                    .dist/index.html  1.39 KiB          [emitted]              \n55e664c36a02d03a083764a7c577f012.png  17.2 KiB          [emitted] [immutable]  \n                           bundle.js   374 KiB    main  [emitted]              main\nEntrypoint main = bundle.js\n[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {main} [built]\n[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]\n[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]\n[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]\n[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]\n[./node_modules/webpack/hot sync ^\\.\\/log$] (webpack)/hot sync nonrecursive ^\\.\\/log$ 170 bytes {main} [built]\n[./src/js/components/Calendar.js] 1.18 KiB {main} [built]\n[./src/js/components/Input.js] 171 bytes {main} [built]\n[./src/js/components/Results.js] 603 bytes {main} [built]\n[./src/js/handlers/base.js] 356 bytes {main} [built]\n[./src/main.js] 2.7 KiB {main} [built]\n    + 23 hidden modules\n\nERROR in   Error: /home/alan/dev/privateFolder/shrektime/node_modules/style-loader/dist/runtime/injectStylesIntoSty  leTag.js?:93\n    var style = document.createElement(\'style\');\n                ^\n  ReferenceError: document is not defined\n  \n  - injectStylesIntoStyleTag.js?:93 insertStyleElement\n    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:93:15\n  \n  - injectStylesIntoStyleTag.js?:208 addStyle\n    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:208:13\n  \n  - injectStylesIntoStyleTag.js?:81 modulesToDom\n    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:81:18\n  \n  - injectStylesIntoStyleTag.js?:239 module.exports\n    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:239:25\n  \n  - style.css?:15 eval\n    /home/alan/dev/privateFolder/shrektime/src/style.css?:15:14\n  \n  - index.html:240 Object../src/style.css\n    /home/alan/dev/privateFolder/shrektime/src/index.html:240:1\n  \n  - index.html:21 __webpack_require__\n    /home/alan/dev/privateFolder/shrektime/src/index.html:21:30\n  \n  - loader.js:3 eval\n    [index.html?.]/[html-webpack-plugin]/lib/loader.js:3:34\n  \n  - index.html:133 Object../node_modules/html-webpack-plugin/lib/loader.js!./src    /index.html\n    /home/alan/dev/privateFolder/shrektime/src/index.html:133:1\n  \n  - index.html:21 __webpack_require__\n    /home/alan/dev/privateFolder/shrektime/src/index.html:21:30\n  \n\nChild HtmlWebpackCompiler:\n                                   Asset      Size  Chunks                         Chunk Names\n    55e664c36a02d03a083764a7c577f012.png  17.2 KiB          [emitted] [immutable]  \n     + 1 hidden asset\n    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0\n    [./node_modules/css-loader/dist/cjs.js!./src/style.css] 5.29 KiB {HtmlWebpackPlugin_0} [built]\n    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {HtmlWebpackPlugin_0} [built]\n    [./node_modules/html-loader/dist/runtime/getUrl.js] 548 bytes {HtmlWebpackPlugin_0} [built]\n    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 4.34 KiB {HtmlWebpackPlugin_0} [built]\n    [./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js] 6.64 KiB {HtmlWebpackPlugin_0} [built]\n    [./src/img/icons8-shrek-256.png] 80 bytes {HtmlWebpackPlugin_0} [built]\n    [./src/js/components/Calendar.js] 1.18 KiB {HtmlWebpackPlugin_0} [built]\n    [./src/js/components/Input.js] 171 bytes {HtmlWebpackPlugin_0} [built]\n    [./src/js/components/Results.js] 603 bytes {HtmlWebpackPlugin_0} [built]\n    [./src/js/handlers/base.js] 356 bytes {HtmlWebpackPlugin_0} [built]\n    [./src/js/handlers/dateHandler.js] 1.97 KiB {HtmlWebpackPlugin_0} [built]\n    [./src/main.js] 2.7 KiB {HtmlWebpackPlugin_0} [built]\n    [./src/style.css] 519 bytes {HtmlWebpackPlugin_0} [built]\n\xe2\x84\xb9 \xef\xbd\xa2wdm\xef\xbd\xa3: Failed to compile.\n

\n

这是我的package.json

\n

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

\n

在我的main.js文件夹中，我导入了 CSS 和 Sass：

\n

import sass from \'./sass/main.scss\';\nimport css from \'./style.css\';\n

\n

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

\n

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

\n

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

\n

\n

Answer 1

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

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

（我知道上面的问题包含测试，但我的声誉太低，无法发表评论，并且我相信了解错误的根本原因与弄清楚如何解决它们有关。我不喜欢未经解释的“我做了一件事”现在它可以工作了！！各种答案。）

Answer 2

所以我不确定其他人是否会遇到完全相同的错误，但为了以防万一，没有什么比搜索论坛并找到完全相同的错误并且没有人留下答案更糟糕的了。

我从一个友好的 redditor 那里得到了帮助（大喊 r/learnjavascript），基本上只是这里和那里的一些语法错误，我不明白事情是如何工作的。

在 下，HtmlWebpackPlugin我必须将文件名从 更改为.dist/index.html，并且必须在中index.html添加以下代码才能运行 webpack-dev-server ：module.exportswebpack.config.js

    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }

这是从文档页面https://webpack.js.org/configuration/dev-server/#devserver直接提取的。想必您可以选择您喜欢的任何端口号。

此外，我必须更改导入其中一个 js 文件的方式，因为它是一个类（说实话，我可能应该更改它，但当我到达它时我会跨过那座桥）。它被称为Calendar.jsso 而不是import * as Calendar from './Calendar'我必须使用import Calendar from './Calendar'.

最后，在我的文件中src/index.html，我分别留下了css 和 标签style，所以我不得不删除它们。scriptmain.js