A simple development server for multi-page site in Html5, JS y CSS. Features:
-
A separete folder configuration for
webpack
(production and development) -
It use HtmlWebpackPlugin plugin to define each page, title and activate class for the active item menu.
-
Bootstrap source files. For an easy implementation, the compiled and minified files are used, called in
index.js
and you can change it. -
Some declarete rules (into config webpack):
- Split code
js
- Separate CSS files
Sass
yPostcss
: autoprefixer y cssnano (minify)- Loader and optimize files images
- Loader fonts files
Handlebars
template
- Split code
-
Install Node.js
-
Clone the webpack-server repository:
git clone https://github.com/Edurtu/webpack-server.git
-
Navigate to the webpack-server folder
cd webpack-server
-
Install dependencies:
npm install
-
The entry files of our project, is inside
src
folder -
The production folder is
dist
, you can change it in webpack.prod.js. Erase and recreate the production folder, type:npm run build
-
It integrate a simple web server and ability to use live reloading with
webpack-dev-server
module, in webpack.dev.js you can change the configurable options. Run the development server typing:npm start
Servidor de desarrollo para sitio web multi-página en Html5, JS y CSS. Características:
-
Carpeta de configuración separada en
webpack
(producción y desarrollo). -
Uso del plugin HtmlWebpackPlugin para definir cada página, su título y activación de la opción del menú en la navegación
-
Archivos fuente de Bootstrap. Para una implementación fácil se usan los ficheros complilados y minificados, estos son llamados en
index.js
donde puedes cambiarlo. -
Algunas reglas declaradas (config webpack):
- División de módulos
js
- Extracción de css
Sass
yPostcss
: autoprefixer y cssnano (minificación)- Lector y optimización de imágenes
- Lector de fuentes locales
- Uso del sistema de plantillas
Handlebars
- División de módulos
-
Instala Node.js
-
Clona el repositorio webpack-server:
git clone https://github.com/Edurtu/webpack-server.git
-
Entra en la carpeta webpack-server
cd webpack-server
-
Instala las dependencias:
npm install
-
Estructura del proyecto en la carpeta
src
-
Carpeta de producción 'generada'
dist
, configuración en webpack.prod.jsnpm run build
-
Servidor de desarrollo
webpack-dev-server
, configuración en webpack.dev.jsnpm start
License MIT https://opensource.org/licenses/mit-license.php