веб-интерфейсный проект многостраничного проекта

внешний интерфейс CSS Webpack Underscore.js
веб-интерфейсный проект многостраничного проекта

Проект многостраничного веб-интерфейса webpack подходит для отображения сайтов, таких как официальный сайт.

Example

Demo

Feature

  • Поддержка синтаксиса ES6, компиляция с помощью babel, по умолчаниюenvокружающая обстановка -preset-env

  • поддержка htmlejsсинтаксис, использованиеunderscore-template-loaderа такжеHtmlWebpackPluginКомпиляция, подробный синтаксис можно посмотретьunderscoreилиlodash _.templateфункциональный раздел. Кроме того, загрузчик underscore-template-loader предоставляетМакросыОсобенности настраиваемого статического содержимого, встроенногоrequireМакросы могут вводить общедоступные компоненты HTML в файл HTML страницы, такие как верхний и нижний колонтитулы и другие многостраничные общедоступные компоненты, а также могут предоставлять параметры компонентам.

  • Встроенная сторонняя библиотека CSS - Normalize.css @ 7.0.0 и библиотека JS - jquery@33.2.1 может использоваться глобально, нет необходимости объявлять введение, добавление или удаление файлов конфигурации можно изменитьbuild/webpack.base.config.js.

  • Все ссылки на ресурсы в файлах html, css и js используют относительные пути и автоматически определяют, нужно ли преобразовывать в формат base64.

  • Поддержка автопрефиксера cssbrowserslist: ["> 1%, "last 2 versions"], без совместимости браузера с рукописным вводом; поддерживает функцию @import, обрабатываемую css-loader.

  • Упаковка использует хэш содержимого, и многократная упаковка не изменит значение хеш-функции в имени файла, если содержимое файла не изменилось.

Для получения подробной информации, пожалуйста, обратитесь к этой статьеFront-end многостраничный проект на основе webpack :sparkles:

Node

Обязательно следуйте структуре страницы ниже

|-- src/                        -- 源文件
|   |-- index.html                  -- 主页面
|   |-- index/                      -- 主页面资源
|       |-- index.css
|       |-- index.js
|       |-- img/
|   |-- page-a/                     -- page-a 页面
|       |-- index.html
|       |-- index.css
|       |-- index.js
|       |-- img/
|       |-- sub-page-a                  -- page-a 子页面
|           |-- index.html
|           |-- index.css
|           |-- index.js
|           |-- img/
|   ... (more like page-a)
скопировать код

За исключением того, что главная страница помещает index.html в корневой каталог src, другие страницы и подстраницы имеют такую ​​же структуру.

:zap: Каждый раз, когда вы добавляете страницу, вам нужноconfig/entrys.jsДобавьте соответствующий путь входа на страницу

Usage

Install

git clone git@github.com:monine/webpack-multi-page.git

or

git clone https://github.com/Monine/webpack-multi-page.git

or

download

Build Setup

# install dependencies
  npm install

# serve with hot reload at localhost:8080
  npm run dev

# build for testing without minification
  npm run testing

# build for production with minification
  npm run build
скопировать код

LICENSE

MIT

Категории