Добрый день!
Я начинающий. Добрался до изучения webpack. Не могу разложить по полочкам информацию из кучи мануалов и вебинаров.
Сразу прошу прощения за много текста, - я боюсь упустить что-то важное. Что я делаю не так, что у меня сплошные ошибки?
Есть тестовый проект в котором использовались технологии: HTML/SASS/JS. Проект нужно собрать.
Структура папок:
.git
.gitignore
//
css\style.css
css\style.css.map
sass\style.sass // точка входа, куда я импортирую остальные стили компонентов.
sass\_header.sass // стили для заголовка
sass\_wrapper.sass // стили для основной разметки
sass\_footer.sass // стили для подвала
//
js\js.js // логика компонентов
index.html
У меня установлены Node.js и менеджер пакетов npm.
(1)
>> npm init
Появляется файл: package.json с разметкой:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"repository": {
"type": "git",
"url": "git+https://github.com/semenovgit/test.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/semenovgit/test/issues"
},
"homepage": "https://github.com/semenovgit/test#readme",
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"dependencies": {
"minipass": "^2.3.5",
"safe-buffer": "^5.1.2"
}
}
(2)
>> npm install webpack -D
Добавляю к проекту webpack.
(3) Теперь мануал просит добавить в объект script файла package.json такие строки:
"scripts": {
"build": "webpack",
"start": "webpack --watch"
}
получилось (провожу не весь файл, а только объект script):
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack --watch"
}
(4) Теперь мануал просит выполнить npm run build и npm run start.
>> npm run build <- после этой появляется это:
Код:
> test@1.0.0 build D:\IT\test
> webpack
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
Hash: d5a559be15521c0317b7
Version: webpack 4.29.6
Time: 81ms
Built at: 2019-03-12 19:15:48
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\IT\test'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! test@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the test@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\anonimous\AppData\Roaming\npm-cache\_logs\2019-03-12T17_15_48_861Z-debug.log
(5) На команду проверки установленных пакетов пишет это с кучей ошибок:
>>npm list --depth=0
Код:
test@1.0.0 D:\IT\test
+-- minipass@2.3.5
+-- safe-buffer@5.1.2
+-- webpack@4.29.6
`-- webpack-cli@3.2.3
npm ERR! missing: mkdirp@0.5.1, required by node-pre-gyp@0.10.3
npm ERR! missing: minimist@0.0.8, required by mkdirp@0.5.1
npm ERR! missing: minimatch@3.0.4, required by ignore-walk@3.0.1
npm ERR! missing: brace-expansion@1.1.11, required by minimatch@3.0.4
npm ERR! missing: balanced-match@1.0.0, required by brace-expansion@1.1.11
npm ERR! missing: concat-map@0.0.1, required by brace-expansion@1.1.11
npm ERR! missing: console-control-strings@1.1.0, required by npmlog@4.1.2
npm ERR! missing: inherits@2.0.3, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.2, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.2, required by string_decoder@1.1.1
npm ERR! missing: console-control-strings@1.1.0, required by gauge@2.7.4
npm ERR! missing: string-width@1.0.2, required by gauge@2.7.4
npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
npm ERR! missing: code-point-at@1.1.0, required by string-width@1.0.2
npm ERR! missing: is-fullwidth-code-point@1.0.0, required by string-width@1.0.2
npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
npm ERR! missing: number-is-nan@1.0.1, required by is-fullwidth-code-point@1.0.0
npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
npm ERR! missing: string-width@1.0.2, required by wide-align@1.1.3
npm ERR! missing: inherits@2.0.3, required by glob@7.1.3
npm ERR! missing: minimatch@3.0.4, required by glob@7.1.3
npm ERR! missing: once@1.4.0, required by glob@7.1.3
npm ERR! missing: once@1.4.0, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
npm ERR! missing: minipass@2.3.5, required by tar@4.4.8
npm ERR! missing: mkdirp@0.5.1, required by tar@4.4.8
npm ERR! missing: safe-buffer@5.1.2, required by tar@4.4.8
npm ERR! missing: yallist@3.0.3, required by tar@4.4.8
npm ERR! missing: minipass@2.3.5, required by fs-minipass@1.2.5
npm ERR! missing: safe-buffer@5.1.2, required by minipass@2.3.5
npm ERR! missing: yallist@3.0.3, required by minipass@2.3.5
npm ERR! missing: minipass@2.3.5, required by minizlib@1.2.1