#javascript #node.js #webpack
#javascript #node.js #webpack
Вопрос:
tl; dr: Webpack не будет компилироваться, и я не уверен, почему, когда все выглядит синтаксически правильно, а также я не совсем понимаю, что подразумевает эта ошибка.
Пытаюсь использовать webpack. Полное раскрытие: действительно новое для этого (js / интерфейс в целом). Я, наконец, устранил другие ошибки, которые я получал (в основном, просто указывая на неправильные пути к файлам или синтаксические ошибки). Я посмотрел видео на YouTube, чтобы настроить это, что, оглядываясь назад, возможно, было не лучшей идеей, но мне нужно было с чего-то начать, а смотреть проще, чем читать. В любом случае, я последовал этому и все пошло своим чередом. Установил все с помощью npm (см. package.json Ниже) и создал src / dist и так далее. Я не использую React / Angular / Vue и т.д., Просто обычный старый ванильный 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"
})
]
};
Это изображение моей структуры папок:
Комментарии:
1. Похоже, что ваша установка пытается запустить клиентский код на сервере, где не
documentсуществует. Можете ли вы связать нас с руководством, которому вы следуете?2. youtube.com/watch?v=TzdEpgONurw
3. также, как бы то ни было, в
bundle.jsнем есть код, поэтому он выполняет некоторые действия, которые, я полагаю,[built]означают в терминале4. Удалось решить это, переставив загрузчики CSS
5. @RichardMuvirimi, который также разрешил это для меня — порядок загрузчиков sass / css / postcss
Ответ №1:
Я только что имел и решил эту проблему, не найдя ответа в stackoverflow. Итак, вот как я вызвал эту проблему: в webpack, в вашем разделе loader, если вы пропустите «тестовую» часть своего правила, вы можете вызвать эту ошибку. Проблема в том, что webpack вызовет ваш загрузчик для файлов неправильного типа и выдаст ошибки, подобные этой.
..
module: {
rules: [
{
test: /.ts$/,
use: 'ts-loader', exclude: /node_modules/
},
]
}
..
(Я знаю, что приведенный выше вопрос содержит тесты, но моя репутация слишком мала, чтобы комментировать, и я считаю, что понимание основных причин ошибки имеет отношение к выяснению того, как их решить. Мне не нравится необъяснимое «Я сделал что-то, и теперь это работает!! виды ответов.)
Ответ №2:
Поэтому я не уверен, что у кого-то еще будет такая же ошибка, но на всякий случай нет ничего хуже, чем поискать форумы и найти точно такую же ошибку, и никто не оставит ответ.
Я получил помощь от дружественного редактора redditor (shoutout r / learnjavascript), и это было в основном всего лишь несколько синтаксических ошибок здесь и там, и я не понимал, как все работает.
в HtmlWebpackPlugin мне пришлось изменить имя файла с .dist/index.html на index.html и добавить следующий код в module.exports of webpack.config.js для запуска webpack-dev-server:
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
который извлекается прямо со страницы документовhttps://webpack.js.org/configuration/dev-server/#devserver. Предположительно, вы можете выбрать любой номер порта, который вам нравится.
Кроме того, мне пришлось изменить способ импорта одного из моих js-файлов, поскольку это класс (и, возможно, мне следует это изменить, но я перейду этот мост, когда доберусь до него). Это вызвано, Calendar.js поэтому вместо того, чтобы делать import * as Calendar from './Calendar' , мне пришлось использовать import Calendar from './Calendar' .
Наконец, в моем src/index.html я оставил теги style и script для css и main.js соответственно, поэтому мне пришлось их удалить.