Configuración de Webpack para Proyectos Svelte

npm i svelte

npm i -D @babel/core @babel/polyfill @babel/preset-env babel-loader html-webpack-plugin svelte-loader webpack webpack-cli webpack-dev-server

Hay que crear el archivo .babelrc e insertarle esto:

{
  "presets": [
    "@babel/preset-env"
  ]
}

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*','.mjs','.js','.svelte']
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                } 
            },
            {
                test: /\.svelte$/,
                exclude: /node_modules/,
                use: {
                    loader: 'svelte-loader'
                }
            }
   
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}

Aquí yo recomiendo el curso de webpack para que puedan entender las directivas y el curso sobre gestor de dependencias npm para que sean unos Pros en esta herramienta. 💪😎
🎉Sin olvidar claramente sus respectivas documentaciones:

• Webpack
• Babel
• Npm

Dentro del vídeo falto crear el archivo de configuración de babel, recuerden descargarlo en la sección de enlaces

Para los que vengan a futuro, para no tener errores de compatibilidad y comandos, donde seguro las librerias ya vayan avanzando, actualizandose y/o mutando, mi recomendación para poder seguir el curso igual que el profe, es agregar al package.json las dependencies y devDependencies con las versiones que utiliza el profesor, y correrlas sin instalar de la forma que hace el profe sino así:

  "dependencies": {
    "svelte": "^3.18.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/polyfill": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }

Y luego correr el comando npm install, de esta forma instala las mismas versiones que el profesor a la hora de hacer el curso y debería andar todo correctamente sin tener problemas.

Mucha suerte con el curso 😃

Es importante crear el archivo .babelrc con lo siguiente:

{
  "presets": [
    "@babel/preset-env"
  ]
}

Es necesario hacer todo esto con cada proyecto o se puede usar directamente : npx degit svelte/template nombre del proyecto?

Eso me agrada mucho, que se configure un proyecto desde el inicio, así se pone en practica el curso de webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*', '.mjs', '.js', '.svelte']
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclue: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.svelte$/,
                exclude: /node_modules/,
                use: {
                    loader: 'svelte-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}```

Importarte hacer el curso de webpack, será el próximo a tomar.

Al instalar las dependencias no me creó el archivo .babelrc
¿Lo tengo que crear manualmente?

Si despues de configurar el entorno de trabajo desean subir los cambios hasta ahora realizados de pugstagram en el repositorio, recuerden añadir el archivo .gitignore :

/node_modules/
/public/build/

.DS_Store

Ya que se corre el riesgo de subir node_modules por no existir el archivo .gitignore.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['*', '.mjs', '.js', '.svelte']
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html'
    })
  ]
} 

Anotado el curso de Webpack!

Importante que si no corre tu codigo o note aparece algun problema con el babel loader o algo similar, primeor crear un archivo .babelrc.

👌

Nunca fue tan sencillo instalar Babel jajaja 😄