webpack
Cargadoras
Buscar..
Observaciones
Los cargadores de paquetes web se pueden configurar como "preLoaders", "loaders" y "postLoaders". Aunque no tienen que serlo, las configuraciones que utilizan linting u otras operaciones imperativas o en serie pueden aprovechar estas etapas de compilación en la tubería.
La clave para comprender los cargadores y su uso es que Webpack ejecutará cada módulo en el gráfico de requisitos a través del sistema del cargador. Siguiendo el ejemplo anterior, esto significa que a medida que Webpack comience a rastrear a través de las importaciones de su aplicación, identificará los archivos requeridos y utilizando una expresión regular simple, determinará qué archivo o tipo de archivo requiere qué cargador o serie de cargadores.
Arriba puede ver que todos los archivos ".js" o ".jsx" serán esbozados por el eslint-loader en la fase preLoader. Otros tipos de archivos js|x también se ejecutarán a través del babel-loader en la fase de carga principal. Además, en la misma fase, cualquier archivo .scss se cargará en el sass-loader . Esto le permite importar archivos Sass en sus módulos JS y hacer que se envíen al paquete JS resultante o incluso a otro paquete CSS independiente (mediante un complemento ).
Nota: la importación de archivos .scss solo funcionará con Webpack y un cargador adecuado. Node no entenderá este tipo de importación sin un preprocesador o transpiler.
También es de destacar en el ejemplo .scss la capacidad de "encadenar" cargadores utilizando el ! Signo de exclamación como "tubo" entre diferentes cargadores. El ejemplo anterior canaliza la salida del "sass-loader" al "css-loader" y finalmente al "style-loader" Esto también podría realizarse con una serie de loaders: ['style-loader', 'css-loader', 'sass-loader'] . También hay diferentes opciones disponibles para las definiciones del cargador en línea y siguen la sintaxis de los parámetros de consulta que se encuentran comúnmente en las URL.
Consulte también: https://webpack.github.io/docs/loaders.html
Config. Utilizando preLoader para eslint, babel para jsx y css loader chaining.
La siguiente configuración se puede usar como configuración básica para agrupar su proyecto como una biblioteca. Observe cómo la configuración del módulo contiene una lista de preLoaders y cargadores.
// webpack.config.js
var path = require('path');
module.exports = {
entry: path.join(__dirname, '..', 'src/index.js'),
output: {
path: path.join(__dirname, '..', '/lib'),
filename: outputFile,
library: 'myCoolBundle.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
preLoaders: [
{
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: /node_modules/,
}
],
loaders: [
{
test: /(\.jsx|\.js)$/,
loader: ['babel'],
exclude: /(node_modules)/,
include: path.join(__dirname, '..'),
query: {
presets: [ 'es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader!sass-loader"]
}
]
},
resolve: {
root: path.resolve(__dirname, '..', './src'),
extensions: ['', '.js', '.jsx', '.scss'],
fallback: path.join(__dirname, '../node_modules')
},
eslint: {
configFile: path.resolve(__dirname, '..', '.eslintrc'),
}
};