Edurtu / webpack-server

Webpack development server with multipage website in Html5, JS and CSS.

Webpack-Server

Español | License

---

Development server (with webpack)

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 y Postcss: autoprefixer y cssnano (minify)
  • Loader and optimize files images
  • Loader fonts files
  • Handlebars template

Install

1. Install Node.js

2. Clone the webpack-server repository:

     git clone https://github.com/Edurtu/webpack-server.git

3. Navigate to the webpack-server folder

     cd webpack-server

4. Install dependencies:

     npm install

Considerations

• 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

---

Spanish

Servidor para desarrollo (con Webpack)

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 y Postcss: autoprefixer y cssnano (minificación)
  • Lector y optimización de imágenes
  • Lector de fuentes locales
  • Uso del sistema de plantillas Handlebars

Instalación

1. Instala Node.js

2. Clona el repositorio webpack-server:

     git clone https://github.com/Edurtu/webpack-server.git

3. Entra en la carpeta webpack-server

     cd webpack-server

4. Instala las dependencias:

     npm install

Consideraciones

• Estructura del proyecto en la carpeta src

• Carpeta de producción 'generada' dist, configuración en webpack.prod.js

    npm run build

• Servidor de desarrollo webpack-dev-server, configuración en webpack.dev.js

    npm start

---

License

License MIT https://opensource.org/licenses/mit-license.php