diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..04c01ba
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..40cb484
--- /dev/null
+++ b/README.md
@@ -0,0 +1,17 @@
+# WEBPACK STARTER
+
+Este es el proyecto inicial para crear aplicaciones utilizando webpack
+
+
+### Notas:
+Recuerden reconstruir los módulos de Node con:
+
+```
+npm install
+```
+
+Y para construir el buil, recuerden utilizar el:
+
+```
+npm run build
+```
\ No newline at end of file
diff --git a/babel.config.json b/babel.config.json
new file mode 100644
index 0000000..8aa924d
--- /dev/null
+++ b/babel.config.json
@@ -0,0 +1,3 @@
+{
+ "presets": ["@babel/preset-env"]
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..22b9916
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1 @@
+Template • TodoMVC y});var n=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.tarea=e,this.id=(new Date).getTime(),this.completado=!1,this.creacion=new Date}var n,r,o;return n=t,o=[{key:"fromJson",value:function(e){var n=e.id,r=e.tarea,o=e.completado,a=e.creado,i=new t(r);return i.id=n,i.completado=o,i.creado=a,i}}],(r=null)&&e(n.prototype,r),o&&e(n,o),Object.defineProperty(n,"prototype",{writable:!1}),t}();function r(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return o(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return o(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,a=function(){};return{s:a,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,c=!0,l=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return c=t.done,t},e:function(t){l=!0,i=t},f:function(){try{c||null==n.return||n.return()}finally{if(l)throw i}}}}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,c=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return i=t.done,t},e:function(t){c=!0,a=t},f:function(){try{i||null==n.return||n.return()}finally{if(c)throw a}}}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n\n\t\t\n\t\t\t").concat(t.tarea,' \n\t\t\t
\n\t\tTemplate • TodoMVC
+
+
+
+
+
+
+
+
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..d7cf362
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,8 @@
+import './styles.css';
+import { Todo, TodoList } from './classes';
+import { crearTodoHtml } from './js/componentes';
+
+export const todoList = new TodoList();
+
+// todoList.todos.forEach( ( todo ) => crearTodoHtml( todo ) );
+todoList.todos.forEach( crearTodoHtml );
\ No newline at end of file
diff --git a/src/js/componentes.js b/src/js/componentes.js
new file mode 100644
index 0000000..72c4230
--- /dev/null
+++ b/src/js/componentes.js
@@ -0,0 +1,144 @@
+// importaciones
+import { Todo } from '../classes';
+import { todoList } from '../index';
+
+// referencias en el html
+const divTodoList = document.querySelector( '.todo-list' );
+const txtInput = document.querySelector( '.new-todo' );
+const btnEliminarCompletados = document.querySelector( '.clear-completed' );
+const ulFiltros = document.querySelector( '.filters' );
+const anchorFiltros = document.querySelectorAll( '.filtro' );
+const todosPendientes = document.querySelector( '.todo-count' );
+
+export const crearTodoHtml = ( todo ) => {
+
+ const htmlTodo = `
+
+
+ ${ todo.tarea }
+
+ `;
+
+
+ const div = document.createElement( 'div' );
+ div.innerHTML = htmlTodo;
+
+ divTodoList.append( div.firstElementChild );
+
+ todosPendientes.innerText = `${ todoList.obtenerPendientes() } pendiente(s)`;
+
+ return div;
+}
+
+// Eventos
+txtInput.addEventListener( 'keyup', ( event ) => {
+
+ // verificar que el usuario de enter y que el campo no esté vació
+ if ( event.keyCode === 13 && txtInput.value.length > 0 ) {
+
+ // crear una nueva instancia del nuevo Todo
+ const nuevoTodo = new Todo( txtInput.value );
+ // añadir el nuevo Todo a la lista de Todos
+ todoList.nuevoTodo( nuevoTodo );
+ // crear un elemento del todo en el html
+ crearTodoHtml( nuevoTodo);
+ // vaciar el input tras generar un todo
+ txtInput.value = '';
+ }
+});
+
+divTodoList.addEventListener( 'click', ( event ) => {
+
+ // obtener el nombre del elemento al que se le da click
+ const nombreElemento = event.target.localName; // input, label, button
+ // obtener el elemento del id en el que está encapsulado
+ const todoElemento = event.target.parentElement.parentElement;
+ // obtener el id del elemento
+ const todoId = todoElemento.getAttribute( 'data-id' );
+
+ // verificar que lo que se le dio click sea un input
+ if ( nombreElemento.includes( 'input' ) ) {
+ // marcar el todo como completado
+ todoList.marcarCompletado( todoId );
+ // agregar estilos del todo para que se vea completado
+ todoElemento.classList.toggle( 'completed' );
+ } else if ( nombreElemento.includes( 'button' ) ) {
+ // inicializar la función de eliminar todo
+ todoList.eliminarTodo( todoId );
+ // eliminar el elemento del html
+ divTodoList.removeChild( todoElemento );
+ }
+
+ todosPendientes.innerText = `${ todoList.obtenerPendientes() } pendiente(s)`;
+
+});
+
+btnEliminarCompletados.addEventListener( 'click', () => {
+
+ // eliminar los todos completados del contenedor
+ todoList.eliminarCompletados();
+
+ // recorrer cada uno de los elementos completados
+ for ( let i = divTodoList.children.length -1; i >= 0; i -- ) {
+
+ // obtener la información del elemento
+ const elemento = divTodoList.children[ i ];
+
+ // verificar que tenga la clase completado
+ if( elemento.classList.contains( 'completed' ) ) {
+ // eliminar elemento
+ divTodoList.removeChild( elemento );
+ }
+
+ }
+
+});
+
+ulFiltros.addEventListener( 'click', ( event ) => {
+ // obtener el texto del anchor clickeado
+ const filtro = event.target.text;
+ // verificar que el anchor no sea undefined
+ if ( !filtro ) { return; }
+
+ // quitar la clase selected de los anchors
+ anchorFiltros.forEach( ( elem ) => elem.classList.remove( 'selected' ) );
+ // agregar la clase selected solo al boton seleccionado
+ event.target.classList.add( 'selected' );
+
+ // recorrer cada uno de los todos
+ for ( const elemento of divTodoList.children ) {
+
+ // quitar la clase hidden de todos los todos
+ elemento.classList.remove( 'hidden' );
+
+ // verificar si el todo está completado
+ const completado = elemento.classList.contains( 'completed' );
+
+ // hacer un switch con el tipo de filtro que quiere el usuario
+ switch( filtro ) {
+
+ // ver los todos pendientes
+ case 'Pendientes':
+ // verificar si el todo esta completado
+ if ( completado ) {
+ // en caso de estarlo se oculta
+ elemento.classList.add( 'hidden' );
+ }
+ break;
+
+ // ver los todos completados
+ case 'Completados':
+ // verificar que los todos no esten completos
+ if ( !completado ) {
+ // en caso de no estarlo se ocultan
+ elemento.classList.add( 'hidden' );
+ }
+ break;
+
+ }
+ }
+
+});
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..95575d6
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,523 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: 100%;
+ vertical-align: baseline;
+ font-family: inherit;
+ font-weight: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ appearance: none;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ background: #f5f5f5;
+ color: #111111;
+ min-width: 230px;
+ max-width: 550px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: 300;
+}
+
+:focus {
+ outline: 0;
+}
+
+.hidden {
+ display: none;
+}
+
+.todoapp {
+ background: #fff;
+ margin: 130px 0 40px 0;
+ position: relative;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+ 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::-moz-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::input-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp h1 {
+ position: absolute;
+ top: -140px;
+ width: 100%;
+ font-size: 80px;
+ font-weight: 200;
+ text-align: center;
+ color: #b83f45;
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 24px;
+ font-family: inherit;
+ font-weight: inherit;
+ line-height: 1.4em;
+ color: inherit;
+ padding: 6px;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+ padding: 16px 16px 16px 60px;
+ border: none;
+ background: rgba(0, 0, 0, 0.003);
+ box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+ width: 1px;
+ height: 1px;
+ border: none; /* Mobile Safari */
+ opacity: 0;
+ position: absolute;
+ right: 100%;
+ bottom: 100%;
+}
+
+.toggle-all + label {
+ width: 60px;
+ height: 34px;
+ font-size: 0;
+ position: absolute;
+ top: -52px;
+ left: -13px;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+.toggle-all + label:before {
+ content: '❯';
+ font-size: 22px;
+ color: #e6e6e6;
+ padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked + label:before {
+ color: #737373;
+}
+
+.todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+ border-bottom: none;
+}
+
+.todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
+}
+
+.todo-list li.editing .edit {
+ display: block;
+ width: calc(100% - 43px);
+ padding: 12px 16px;
+ margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+ display: none;
+}
+
+.todo-list li .toggle {
+ text-align: center;
+ width: 40px;
+ /* auto, since non-WebKit browsers doesn't support input styling */
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none; /* Mobile Safari */
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.todo-list li .toggle {
+ opacity: 0;
+}
+
+.todo-list li .toggle + label {
+ /*
+ Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+ IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+ */
+ background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+ background-repeat: no-repeat;
+ background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+ background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+}
+
+.todo-list li label {
+ word-break: break-all;
+ padding: 15px 15px 15px 60px;
+ display: block;
+ line-height: 1.2;
+ transition: color 0.4s;
+ font-weight: 400;
+ color: #4d4d4d;
+}
+
+.todo-list li.completed label {
+ color: #cdcdcd;
+ text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 30px;
+ color: #cc9a9a;
+ margin-bottom: 11px;
+ transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+ color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+ content: '×';
+}
+
+.todo-list li:hover .destroy {
+ display: block;
+}
+
+.todo-list li .edit {
+ display: none;
+}
+
+.todo-list li.editing:last-child {
+ margin-bottom: -1px;
+}
+
+.footer {
+ padding: 10px 15px;
+ height: 20px;
+ text-align: center;
+ font-size: 15px;
+ border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 50px;
+ overflow: hidden;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+ 0 8px 0 -3px #f6f6f6,
+ 0 9px 1px -3px rgba(0, 0, 0, 0.2),
+ 0 16px 0 -6px #f6f6f6,
+ 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+ float: left;
+ text-align: left;
+}
+
+.todo-count strong {
+ font-weight: 300;
+}
+
+.filters {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ right: 0;
+ left: 0;
+}
+
+.filters li {
+ display: inline;
+}
+
+.filters li a {
+ color: inherit;
+ margin: 3px;
+ padding: 3px 7px;
+ text-decoration: none;
+ border: 1px solid transparent;
+ border-radius: 3px;
+}
+
+.filters li a:hover {
+ border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+ border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+ float: right;
+ position: relative;
+ line-height: 20px;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.clear-completed:hover {
+ text-decoration: underline;
+}
+
+.info {
+ margin: 65px auto 0;
+ color: #4d4d4d;
+ font-size: 11px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-align: center;
+}
+
+.info p {
+ line-height: 1;
+}
+
+.info a {
+ color: inherit;
+ text-decoration: none;
+ font-weight: 400;
+}
+
+.info a:hover {
+ text-decoration: underline;
+}
+
+/*
+ Hack to remove background from Mobile Safari.
+ Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ .toggle-all,
+ .todo-list li .toggle {
+ background: none;
+ }
+
+ .todo-list li .toggle {
+ height: 40px;
+ }
+}
+
+@media (max-width: 430px) {
+ .footer {
+ height: 50px;
+ }
+
+ .filters {
+ bottom: 10px;
+ }
+}
+
+
+hr {
+ margin: 20px 0;
+ border: 0;
+ border-top: 1px dashed #c5c5c5;
+ border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+ font-weight: normal;
+ text-decoration: none;
+ color: #b83f45;
+}
+
+.learn a:hover {
+ text-decoration: underline;
+ color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+ margin: 10px 0;
+ font-weight: 500;
+ line-height: 1.2;
+ color: #000;
+}
+
+.learn h3 {
+ font-size: 24px;
+}
+
+.learn h4 {
+ font-size: 18px;
+}
+
+.learn h5 {
+ margin-bottom: 0;
+ font-size: 14px;
+}
+
+.learn ul {
+ padding: 0;
+ margin: 0 0 30px 25px;
+}
+
+.learn li {
+ line-height: 20px;
+}
+
+.learn p {
+ font-size: 15px;
+ font-weight: 300;
+ line-height: 1.3;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+#issue-count {
+ display: none;
+}
+
+.quote {
+ border: none;
+ margin: 20px 0 60px 0;
+}
+
+.quote p {
+ font-style: italic;
+}
+
+.quote p:before {
+ content: '“';
+ font-size: 50px;
+ opacity: .15;
+ position: absolute;
+ top: -20px;
+ left: 3px;
+}
+
+.quote p:after {
+ content: '”';
+ font-size: 50px;
+ opacity: .15;
+ position: absolute;
+ bottom: -42px;
+ right: 3px;
+}
+
+.quote footer {
+ position: absolute;
+ bottom: -40px;
+ right: 0;
+}
+
+.quote footer img {
+ border-radius: 3px;
+}
+
+.quote footer a {
+ margin-left: 5px;
+ vertical-align: middle;
+}
+
+.speech-bubble {
+ position: relative;
+ padding: 10px;
+ background: rgba(0, 0, 0, .04);
+ border-radius: 5px;
+}
+
+.speech-bubble:after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ right: 30px;
+ border: 13px solid transparent;
+ border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+ position: absolute;
+ width: 272px;
+ top: 8px;
+ left: -300px;
+ padding: 10px;
+ border-radius: 5px;
+ background-color: rgba(255, 255, 255, .6);
+ transition-property: left;
+ transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+ .learn-bar {
+ width: auto;
+ padding-left: 300px;
+ }
+
+ .learn-bar > .learn {
+ left: 8px;
+ }
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..128dddc
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,58 @@
+const HtmlWebPack = require( 'html-webpack-plugin' );
+const MiniCssExtract = require( 'mini-css-extract-plugin' );
+const CopyPlugin = require( 'copy-webpack-plugin' );
+
+module.exports = {
+ mode: 'development',
+
+ output: {
+ clean: true // evitar que se sobreesccriban archivos
+ },
+
+ module: {
+ rules: [
+ {
+ test: /\.html$/,
+ loader: 'html-loader',
+ options: {
+ sources: false
+ }
+ },
+ {
+ test: /\.css$/,
+ exclude: /styles.css$/,
+ use: [ 'style-loader', 'css-loader' ]
+ },
+ {
+ test: /styles.css$/,
+ use: [ MiniCssExtract.loader, 'css-loader' ]
+ },
+ {
+ test: /\.(png|jpe?g|gif)$/,
+ loader: 'file-loader'
+ }
+ ]
+ },
+
+ optimization: {
+
+ },
+
+ plugins: [
+ new HtmlWebPack({
+ title: 'Mi Webpack App', // cambiar titulo
+ // filename: 'index.html', // definir el nombre del archivo html
+ template: './src/index.html'
+ }),
+
+ new MiniCssExtract({
+ filename: '[name].css',
+ ignoreOrder: false
+ }),
+ new CopyPlugin({
+ patterns: [
+ { from: 'src/assets/', to: 'assets/' }
+ ]
+ })
+ ]
+}
\ No newline at end of file
diff --git a/webpack.prod.js b/webpack.prod.js
new file mode 100644
index 0000000..834ad4b
--- /dev/null
+++ b/webpack.prod.js
@@ -0,0 +1,78 @@
+const HtmlWebPack = require( 'html-webpack-plugin' );
+const MiniCssExtract = require( 'mini-css-extract-plugin' );
+const CopyPlugin = require( 'copy-webpack-plugin' );
+
+const CssMinimizer = require( 'css-minimizer-webpack-plugin' );
+const Terser = require( 'terser-webpack-plugin' );
+
+module.exports = {
+ mode: 'production',
+
+ output: {
+ clean: true, // evitar que se sobreesccriban archivos
+ filename: 'main.[contenthash].js'
+ },
+
+ module: {
+ rules: [
+ {
+ test: /\.html$/,
+ loader: 'html-loader',
+ options: {
+ sources: false
+ }
+ },
+ {
+ test: /\.css$/,
+ exclude: /styles.css$/,
+ use: [ 'style-loader', 'css-loader' ]
+ },
+ {
+ test: /styles.css$/,
+ use: [ MiniCssExtract.loader, 'css-loader' ]
+ },
+ {
+ test: /\.(png|jpe?g|gif)$/,
+ loader: 'file-loader'
+ },
+ {
+ test: /\.m?js$/,
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader",
+ options: {
+ presets: ['@babel/preset-env']
+ }
+ }
+ }
+ ]
+ },
+
+ optimization: {
+ minimize: true,
+ minimizer: [
+ new CssMinimizer(),
+ new Terser()
+ ]
+ },
+
+ plugins: [
+ new HtmlWebPack({
+ title: 'Mi Webpack App', // cambiar titulo
+ // filename: 'index.html', // definir el nombre del archivo html
+ template: './src/index.html'
+ }),
+
+ new MiniCssExtract({
+ filename: '[name].[fullhash].css',
+ ignoreOrder: false
+ }),
+ new CopyPlugin({
+ patterns: [
+ { from: 'src/assets/',
+ to: 'assets/',
+ noErrorOnMissing: true }
+ ]
+ })
+ ]
+}
\ No newline at end of file