Webpack

Santiago Bernal

teacher•

plantilla webpack:

const webpack = require('webpack');
const path = require('path');
const config = require('sapper/config/webpack.js');
const pkg = require('./package.json');

const mode = process.env.NODE_ENV;
const dev = mode === 'development';

const alias = { svelte: path.resolve('node_modules', 'svelte')};
const extensions = ['.mjs','.js','.json','.svelte','.html'];
const mainFields = ['svelte','module','browser','main'];

module.exports = {
    client: {
        entry: config.client.entry(),
        output: config.client.output(),
        resolve: { alias, extensions, mainFields},
        module: {
            rules: [
                {
                    test: /\.(svelte|html)$/,
                    use: {
                        loader: 'svelte-loader',
                        options: {
                            dev,
                            hydratable: true,
                            hotReload: false
                        }
                    }
                }
            ]
        },
        mode,
        plugins: [
            new webpack.DefinePlugin({
                'process.browser': true,
                'process.env.NODE_ENV': JSON.stringify(mode)
            }),
        ].filter(Boolean),
        devtool: dev &amp;&amp; 'inline-source-map'
    },
    server: {
        entry: config.server.entry(),
        output: config.server.output(),
        target: 'node',
        resolve: { alias, extensions, mainFields},
        externals: Object.keys(pkg.dependencies).concat('encoding'),
        module: {
            rules: [
                {
                    test: /\.(svelte|html)$/,
                    use: {
                        loader: 'svelte-loader',
                        options: {
                            dev,
                            css: false,
                            generate: 'ssr'
                        }
                    }
                }
            ]
        },
        mode: process.env.NODE_ENV,
        performance: {
            hints: false
        }
    },
};```

Luis Alejandro Vera Hernandez

student•

Gracias!

Cristobal Peña

student•

Ni en 1.000 años más sería capaz de configurar este archivo por mi mismo 😦

Kevin Fiorentino

student•

Tienes que tener en cuenta que este archivo de configuración ni el mejor programador del mundo lo puede armar en un video de 12 minutos. Lleva algunas horas y para presentarlo y explicarlo paso por paso el profesor lo vuelve a tipear (seguro copiandolo mirando otro monitor). Tampoco tiene sentido memorizar tanta configuración, es cuestión de experiencia.

Daniel Augusto Melgarejo Gómez

student•

Para trabajar con .env, la documentacion en https://github.com/JpCapdevila/sapper-environment

Daniel Augusto Melgarejo Gómez

student•

Para que funcionen las variables de ambiente configuradas en el archivo.env, es necesario: npm install sapper-environment

y en e archivo** webpack.config.js **adicionar..

module.exports = { client: { //Omitted for readability... plugins: [ // pending https://github.com/sveltejs/svelte/issues/2377 // dev && new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ ** ...sapperEnv(),** 'process.browser': true, 'process.env.NODE_ENV': JSON.stringify(mode) }),

Devi Chaves Rodriguez

student•

Oscar falta el link de la lectura de Webpack :)

Jose Giovanni Vargas Rueda

student•

Cristian Camilo Rodriguez

student•

Jose Giovanni Vargas Rueda

student•

donde puedo leer documentación del porque de esta configuración ?

Enrique Devars

teacher•

Te recomiendo el curso de Webpack de Platzi para esto :)

Enrique Devars

teacher•

Es una configuración que nos ayudará a crear nueestro bundle de producción y el server de desarrollo.

Eduardo Serrano Jaime

student•

¿Si estoy usando rollup que es lo que tengo que modificar?

Pablo Verduzco

student•

Puedes basarte en la plantilla original de Sapper: sapper-template-rollup

Guillermo Castaño Vèlez

student•

Dónde aprende uno todo esto!! XD

Michael Garcia

student•

Comentando antes de que salga el curso :)

Webpack

Bienvenida

Por qué aprender Sapper y qué vas a aprender

¿Qué es Sapper?

Configuración para Sapper

Clonar proyecto Pugstagram

Instalación y configuración de Sapper

Crear Template html

Webpack

Rutas con Sapper

Layout

Profile

Header

Error 404

Optimización

Uso de prefetch y goto

Primer llamado con prefetch

Service Worker

Crear Service Worker

Configurar Service Worker

Despliegue

Despliegue usando Sapper Export

Despliegue en Heroku

Cierre

Continúa con el Curso Práctico de Svelte y Sapper