Git Product home page Git Product logo

static-site-webpack-habr's Introduction

static-site-webpack-habr

Webpack

Демонстрация сборки HTML страниц (или статического сайта) с помощью Webpack.

Статья (в ней прописан устаревший вариант) https://habr.com/ru/articles/350886/.

Новая статьи: article.md (в процессе долгого написания).

Лицензия: MIT.

Использование

  1. Установите программу Node.js.
  2. Создайте директорию (например, 'C:\projects\test'), в которой будете создавать своей проект.
  3. В командной строке (например, 'cmd' или 'PowerShell') перейдите в эту папку.
  4. Скопируйте в папку файлы из данного проекта.

Автор

Автор: Сергиенко Антон Борисович.

static-site-webpack-habr's People

Contributors

dependabot[bot] avatar formak21 avatar harrix avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

static-site-webpack-habr's Issues

Не собирается проект после обновления библиотек

После git clone, npm install и npm run build возникает ошибка сборки на версии e15abe7.

Окружение: Windows 10
Версии node:

node -v
v12.18.3
npm -v
6.14.6
Вывод
PS C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr> npm run build                                     
> [email protected] build C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr
> webpack --mode production && prettier --print-width=120 --parser html --write dist/*.html

Hash: 9ce7c4981fb2649792cc
Version: webpack 4.44.1
Time: 4867ms
Built at: 2020-09-13 19:38:50
7 assets
Entrypoint main = ./js/bundle.js ./js/bundle.js.map
[2] multi ./src/js/index.js ./src/scss/style.scss 40 bytes {0} [built]
[3] ./src/js/index.js 167 bytes {0} [built]
[5] (webpack)/buildin/global.js 472 bytes {0} [built]
[6] ./src/scss/style.scss 1.2 KiB {0} [built] [failed] [1 error]
  + 3 hidden modules

ERROR in ./src/scss/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
 object { postcssOptions?, execute?, sourceMap? }
  at validate (C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr\node_modules\postcss-loader\node_modules\schema-utils\dist\validate.js:98:11)
  at Object.loader (C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr\node_modules\postcss-loader\dist\index.js:43:28)
  at C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr\node_modules\webpack\lib\NormalModule.js:316:20
  at C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr\node_modules\loader-runner\lib\LoaderRunner.js:367:11
  at C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr\node_modules\loader-runner\lib\LoaderRunner.js:233:18
@ multi ./src/js/index.js ./src/scss/style.scss main[1]
Child HtmlWebpackCompiler:
   2 assets
  Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
  Entrypoint HtmlWebpackPlugin_1 = __child-HtmlWebpackPlugin_1
  [0] ./src/html/includes/header.html 468 bytes {0} {1} [built]
  [1] ./src/html/includes/footer.html 128 bytes {0} {1} [built]
  [2] ./node_modules/html-webpack-plugin/lib/loader.js!./src/html/views/index.html 737 bytes {0} [built]
  [3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/html/views/second.html 750 bytes {1} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--4-1!node_modules/postcss-loader/dist/cjs.js??postcss!node_modules/sass-loader/dist/cjs.js??ref--4-3!src/scss/style.scss:
  Entrypoint mini-css-extract-plugin = *
  [0] ./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/dist/cjs.js??postcss!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./src/scss/style.scss 695 bytes {0} [built] [failed] [1 error]

  ERROR in ./src/scss/style.scss (./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/dist/cjs.js??postcss!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./src/scss/style.scss)
  Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
  ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
   - options has an unknown property 'plugins'. These properties are valid:
     object { postcssOptions?, execute?, sourceMap? }
      at validate (C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr\node_modules\postcss-loader\node_modules\schema-utils\dist\validate.js:98:11)
      at Object.loader (C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr\node_modules\postcss-loader\dist\index.js:43:28)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --mode production && prettier --print-width=120 --parser html --write dist/*.html`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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\antih\AppData\Roaming\npm-cache\_logs\2020-09-13T16_38_50_957Z-debug.log
2020-09-13T16_38_50_957Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Users\antih\AppData\Local\Microsoft\WindowsApps;C:\Users\antih\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\antih\AppData\Local\GitHubDesktop\bin;C:\Users\antih\AppData\Roaming\npm
9 verbose lifecycle [email protected]~build: CWD: C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr
10 silly lifecycle [email protected]~build: Args: [
10 silly lifecycle   '/d /s /c',
10 silly lifecycle   'webpack --mode production && prettier --print-width=120 --parser html --write dist/*.html'
10 silly lifecycle ]
11 silly lifecycle [email protected]~build: Returned: code: 2  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `webpack --mode production && prettier --print-width=120 --parser html --write dist/*.html`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\antih\OneDrive\Документы\GitHub\static-site-webpack-habr
16 verbose Windows_NT 10.0.18362
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.18.3
19 verbose npm  v6.14.6
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] build: `webpack --mode production && prettier --print-width=120 --parser html --write dist/*.html`
22 error Exit status 2
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

Error: nmp run start

Запускаем webpack dev server:

Получаем ошибку

`
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'

code: 'MODULE_NOT_FOUND',
requireStack: [
'...../node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
`

Как я понимаю, в package.json вместо
webpack-dev-server --mode development --open
надо
webpack serve

Опечатка в README.md

Сайт автора с последними последние новости: Последняя строка.

Импорт файлов в папке includes

Здравствуйте.
У меня есть папка includes в которой есть файл module-1.html, в который надо импортировать module-2.html из этой же папки (includes), как это сделать?

В файле module-1.html, это не работает
<%= _.template(require('module-2.html').default)() %>
или
<%= _.template(require('./module-2.html').default)() %>
И возникает ошибка, что модуль не найден

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.