webpack
Cargadores y complementos
Buscar..
Observaciones
Los cargadores y complementos constituyen los bloques de construcción de Webpack.
Los cargadores suelen estar delegados a una sola tarea y tipo de archivo. Son más fáciles de configurar y, por lo general, requieren menos código repetitivo.
Los complementos, por otro lado, tienen acceso al sistema de compilación interno de Webpack a través de enlaces y, por lo tanto, son más potentes. Los complementos pueden modificar el entorno de Webpack totalmente configurado y pueden realizar acciones personalizadas a lo largo del proceso de compilación.
Al tratar con nuestros archivos CSS, por ejemplo, un cargador puede usarse para agregar automáticamente prefijos de proveedores a las propiedades, mientras que un complemento se puede usar para producir una hoja de estilo minificada en el proceso de compilación del agrupador.
Empezando con los cargadores
Para comenzar, npm install los cargadores deseados para tu proyecto.
Dentro del objeto de configuración que se exporta en webpack.config.js , una propiedad de module contendrá todos sus cargadores.
const source = `${__dirname}/client/src/`;
module.exports = {
// other settings here
module: {
loaders: [
{
test: /\.jsx?$/,
include: source,
loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
},
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer', 'sass']
}
]
},
};
En la configuración anterior, estamos usando tres configuraciones básicas para nuestros cargadores:
- prueba: aquí es donde unimos cargadores a extensiones específicas usando RegExp. El primer conjunto de cargadores se está ejecutando en todos los archivos .js y .jsx. El segundo conjunto se está ejecutando en todos los archivos .css y .scss.
- include: Este es el directorio en el que queremos que se ejecuten nuestros cargadores. Opcionalmente, podríamos usar la propiedad
excludela misma facilidad para definir directorios que no queremos que se incluyan. - cargadores: esta es una lista de todos los cargadores que queremos ejecutar en los archivos especificados en
testeinclude.
Es importante tener en cuenta que los cargadores se ejecutan de derecha a izquierda en cada matriz de cargadores y de abajo hacia arriba en las definiciones individuales. El siguiente código ejecutará los cargadores en el siguiente orden: sass, autoprefixer, css, style .
loaders: [
{
test: /\.s?css$/,
include: source,
loaders: ['style', 'css', 'autoprefixer']
},
{
test: /\.s?css$/,
include: source,
loaders: ['sass']
}
]
Esta es una fuente común de confusión y errores para los desarrolladores que son nuevos en el paquete web. Por ejemplo, cuando usamos la sintaxis JSX y ES6, queremos eliminar ese código, no agregar el código compilado que proporciona nuestro cargador de babel. Por lo tanto, nuestro cargador de eslint se coloca a la derecha de nuestro cargador de babel.
El sufijo -loader es opcional al listar nuestros cargadores.
loaders: ['sass']
... es equivalente a:
loaders: ['sass-loader']
Alternativamente, puede usar la propiedad del loader (singular) junto con una cadena que separa la lista de cargadores por el ! personaje.
loaders: ['style', 'css']
... es equivalente a:
loader: "style!css"
cargando archivos mecanografiados
Para utilizar mecanografiado con un paquete web, necesita instalar typescript y ts-loader
npm --save-dev install typescript ts-loader
Ahora puedes configurar webpack para usar archivos mecanografiados
// webpack.config.js
module.exports = {
..
resolve: {
// .js is required for react imports.
// .tsx is required for react tsx files.
// .ts is optional, in case you will be importing any regular ts files.
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
// Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
test: /\.tsx?$/,
loaders: isProduction ? ['ts-loader'] : ['react-hot-loader', 'ts-loader'],
exclude: /node_modules/
}
]
},
...
};