Webpack básico
Con este curso de Webpack básico aprenderás qué es Webpack y cómo utilizarlo en tus proyectos, de tal...
En este video te contamos qué es un Loader en Webpack, sus funciones principales y cómo se cargan.
Tabla de contenidos
Un Loader indica a Webpack cómo tiene que transformar el código de un módulo en el concreto. De los mismos destacamos estas funciones principales:
Hay tres formas principales de cargar un Loader:
Lo recomendado es hacerlo por configuración, ya que el poder de Webpack se basa en sus archivos de configuración, y a través de ellos es donde realmente vamos a poder hacer las cosas de la forma correcta.
Vamos a ver un ejemplo de un fichero de configuración:
module.exports = {
module: {
rules: [
{
test: /\.css$/, //Regular expression
use: [
{ loader: ‘style-loader’ }
{
loader: ‘css-loader’,
options: {
modules: true
}
}
{ loader: ‘saas-loader’ }
]
}
]
}
};
Podemos ver que en este fichero de configuración hay una propiedad que se llama module y unas reglas de la misma, que intenta resolver en los ficheros que coincidan contra la expresión regular, y posteriormente y se aplican una serie de Loaders.
En este caso estamos aplicando una serie de Loaders a los archivos .css. Al utilizar use recibimos un array de Loaders, en el caso solo tener uno, podemos prescindir del mismo simplemente especificar el Loader que vamos a a cargar:
module.exports = {
module: {
rules: [
{
test: /\.css$/, //Regular expression
use: ‘css-loader’,
}
]
}
};
Si quieres avanzar y profundizar sobre Webpack puedes hacer el curso de Webpack intermedio en el que aprenderás a estructurar los ficheros de configuración y a configurar un proyecto para su puesta en producción aplicando optimizaciones y utilizando propiedades nuevas que se impartieron en el curso básico de Webpack.
Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.
También te puede interesar
Con este curso de Webpack básico aprenderás qué es Webpack y cómo utilizarlo en tus proyectos, de tal...