domingo, 9 de diciembre de 2018
Instalar Webpack Encore en cualquier proyecto

Instalar Webpack Encore en cualquier proyecto

Webpack Encore es una forma muy simple de integrar webpack en tu aplicación para poder maneger tus archivos css y js.Webpack te ofrece una clara y poderosa apy para empaquetan modulos JS, pre-procesar css y js y compilan assets minificados.

 ¿Genial No?

Vamos a ello.!!

Importante:Asegurarse de tener instalado nodejs y yarn

sudo apt-get install nodejs

sudo apt-get install yarn

1-Instalamos via yarn

yarn add @symfony/webpack-encore --dev // que prefieres npm NO PROBLEM npm install @symfony/webpack-encore --save-dev

¿Que hemos hecho?

Creamos (o modificamos)  el archivo package.json y descargamos todas las dependencias dentro del directorio  node_modules/. Yarn tambien crea/actualiza yarn.lock.

1-creamos un archivo llamado webpack.config.js en el directorio raíz y copiamos lo siguiente.

var Encore = require('@symfony/webpack-encore');

Encore

// directorio donde seran almacenado los assets compilado (crea la carpeta public)

.setOutputPath('public/build/')

// build es el directorio publico que usara el servidor para mostrar las rutas

.setPublicPath('/build')

// solo se necesita para CDN's o subdirectorio de despliegies

//.setManifestKeyPrefix('build/')

/* * ENTRY CONFIG

* * Añade entradas a cada una de tus páginas

* * Cada entrada va a ser un archivo js(e.g. app.js)

* y un archivo css,(esto es una marabilla)

* Esto crea un archivo app.js y uno app.css

*/

.addEntry('app', './assets/js/app.js')

//.addEntry('page1', './assets/js/page1.js')

//.addEntry('page2', './assets/js/page2.js')

.cleanupOutputBeforeBuild()

.enableSourceMaps(!Encore.isProduction())

// activa nombre de ficheros hashed (e.g. app.abc123.css)

.enableVersioning(Encore.isProduction())

// descomenta esto si usas TypeScript

//.enableTypeScriptLoader()

// descomenta esto si usas Sass/SCSS

//.enableSassLoader()

// descomenta esto si estas teniendo problemas con jQuery

//.autoProvidejQuery() ;

module.exports = Encore.getWebpackConfig();

 

3-Ya aquí hemos terminado pero vamos a ver como se compila, y como añadimos una libreria externa (usaremos boopstrao y jquery).

  1. Compilamos yarn encore dev --watch o ./node_modules/.bin/encore dev --watch (esto genera los archivos si no estan creados o los actualiza escribiendo los cambios, dev es para desarrollo, si haces un despliegue usa yarn encore production )
  2. Añadir librerias externas yarn add jquery --dev o yarn add bootstrap --dev (si queremos una versión expecífica ponemos yarn add boopstrap@4.1 --dev o font-awsome, sweetalert en fin cualquier librería y si no encuentra la versión que es te lista las que hay.)
  3. Recuerdas que al compilar se nos creó app.js y app.css (tambien los puedes crear manualmente), pues pues bien, añadimos var $ = require('jquery'); require('bootstrap'); así con cada una de las librería que agregemos.

Y por ultimo solamente nos falta hacer la inclusión de los archivos en nuestra vista (pagina html)

dentro de la etiqueta header <link rel="stylesheet" href"ruta_a_pp.css"> y recomiendo que en el footer <script type"text/javascript src="ruta_a_app.js">

así tendremos boopstra, jquery y todo lo que agregemos en nuestro proyecto, nos dejamos llevar y que ocurra la magía.

Nota:Este post es una forma simple de explicarlo,  para más información Click aquí.

Si sabes más del tema, comenta que todo es bienvenido.

Quieres ser el primero en responder?