Итак, я дизайнер, изучаю код, поэтому, пожалуйста, простите мое невежество.
Я пытаюсь изучить веб-пакет с помощью этого руководства: https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
Репозиторий для учебника находится здесь: https://github.com/joezimjs/Webpack-Introduction-Tutorial
Мой репозиторий того, что я сделал, находится здесь: https://github.com/thedonquixotic/webpack-practice
Следуя руководству, у меня возникли некоторые проблемы, в основном из-за изменений в веб-пакете, я думаю. В настоящее время я работаю над примером 5 (в репозитории есть ветки для каждого шага процесса).
Я сделал тонну устранения неполадок по этому поводу, и я думаю, что наконец узнал, почему!
Когда я набираю npm run, сервер загружается, но папка dist не создается, и сервер выдает ошибку метода http, когда я захожу на страницу, и не может найти шаблон.
Я прошел и перепроверил все, и я обнаружил, что принципиальное различие между ними заключается в том, что репозиторий учебника загружает веб-пакет 2, а мой репозиторий загружает веб-пакет 4. И когда я загружаю веб-пакет 4, я добавляю webpack- cli и относительный путь для вывода, указанный в webpack.config.js как «./dist», больше не работает.
Если я не изменю "./dist", то он выдаст ошибку, говорящую о том, что требуются абсолютные пути. Если я изменю его на «/dist», то он не сможет фактически создать папку dist.
Поскольку я предполагаю, что должен использовать последнюю версию Webpack 4, как мне обойти это?
Я уже пробовал path.resolve(__dirname, 'dist'), и это не исправляет ситуацию в версии webpack 4.
Когда я выполняю решение path.resolve, вместо этого выдается другая ошибка. Сервер даже не загружается. Он создает папку dist, но выдает новый набор ошибок (похоже, он связан с файлом index.html). Это выглядит так:
> [email protected] start /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2
> npm run build -s && npm run server -s
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:244
throw err;
^
ReferenceError: path is not defined
at Object.<anonymous> (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/webpack.config.js:9:15)
at Module._compile (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:133:13)
at requireConfig (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:135:6)
at /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:142:17
at Array.forEach (<anonymous>)
at module.exports (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:140:15)
at yargs.parse (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:241:39)
at Object.parse (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/node_modules/yargs/yargs.js:552:18)
at /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:219:8
at Object.<anonymous> (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:530:3)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack/bin/webpack.js:157:2)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `npm run build -s && npm run server -s`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start 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! /home/david/.npm/_logs/2018-06-20T19_12_54_953Z-debug.log
Не совсем уверен, что делать здесь.
Редактировать:
Итак, я обнаружил, что проблема с 4 заключается в том, что он не может разрешить.path без его добавления в файл конфигурации веб-пакета вверху: const path = require('path');
Когда я добавляю это, он все еще не работает, но выдает НОВУЮ ошибку, которая выглядит так:
> [email protected] start /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2
> npm run build -s && npm run server -s
[BABEL] Note: The code generator has deoptimised the styling of "/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
Hash: 5c8bf89bcb7897b20228
Version: webpack 4.12.0
Time: 13034ms
Built at: 06/20/2018 1:24:10 PM
Asset Size Chunks Chunk Names
bundle.js 215 KiB 0 [emitted] main
index.html 1.37 KiB [emitted]
[100] (webpack)/buildin/global.js 770 bytes {0} [built]
[147] (webpack)/buildin/amd-options.js 82 bytes {0} [built]
[152] (webpack)/buildin/module.js 521 bytes {0} [built]
[248] ./src/numberlist.hbs 931 bytes {0} [built]
[250] ./src/main.js 438 bytes {0} [built]
[542] multi babel-polyfill ./src/main.js 40 bytes {0} [built]
+ 537 hidden modules
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 Error: /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1937
$export($export.S + $export.F * !__webpack_require__(1), 'Object', { defineProperty: __webpack_require__(6).f });
^
TypeError: $export is not a function
- index.html:1937 Object.<anonymous>
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1937:1
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
- index.html:1946 Object.<anonymous>
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1946:1
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
- index.html:1959 Object.module.exports
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1959:31
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
- index.html:175 Object.<anonymous>
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:175:23
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
- index.html:243 Object.<anonymous>
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:243:10
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
Child html-webpack-plugin for "index.html":
1 asset
[46] (webpack)/buildin/module.js 521 bytes {0} [built]
[98] (webpack)/buildin/global.js 770 bytes {0} [built]
[100] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 492 bytes {0} [built]
+ 98 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `npm run build -s && npm run server -s`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start 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! /home/david/.npm/_logs/2018-06-20T19_24_10_672Z-debug.log
