javascript - page - cargadores webpack e incluyen

webpack-- w

Question

Soy nuevo en el paquete web y estoy tratando de entender los cargadores, así como sus propiedades, como prueba, cargador, etc.

Aquí hay un fragmento de muestra de webpack.config.js que encontré en google.

module: {
loaders: [
{
test: //.js$/,
loader: ''babel-loader'',
include: [
path.resolve(__dirname, ''index.js''),
path.resolve(__dirname, ''config.js''),
path.resolve(__dirname, ''lib''),
path.resolve(__dirname, ''app''),
path.resolve(__dirname, ''src'')
],
exclude: [
path.resolve(__dirname, ''test'', ''test.build.js'')
],
cacheDirectory: true,
query: {
presets: [''es2015'']
}
},
]
}

1. ¿Tengo razón en que la prueba: /.js$/ se usará solo para archivos con la extensión .js?

2. El cargador: ''babel-loader'', es el cargador que instalamos usando npm

3. Incluye: Tengo muchas preguntas sobre esto. ¿Tengo razón en que todo lo que colocamos dentro de la matriz será transpilado? Eso significa que se procesarán los archivos index.js, config.js y todos los archivos * .js en lib, app y src.

4. Más preguntas sobre el include: cuando los archivos se transfieren, ¿los archivos * .js se concatenan en un archivo grande?

5. Creo que exclude es auto explicativo. No será transpilado.

6. ¿Qué hace query: {presets: [''es2015'']} do?

Answer 1

1) Correcto.

2) Correcto.

3) Correcto.

4) No estoy seguro. Mi archivo webpack.config.js incluye una clave de salida y lo agrupa todo en un solo archivo:

output: {
path: path.resolve(__dirname, ''build''),
filename: ''bundle.js''
}

5) Correcto.

6) Esto le dice a babel-loader qué tipo de transpile desea que realice, así como otras opciones de compilación. Entonces, por ejemplo, si quiere que transpile jsx también + resultados de caché para mejorar el rendimiento, debería cambiarlo a:

query: {
presets: [''react'', ''es2015''],
cacheDirectory: true
}

Answer 2

En la configuración del paquete web hay varias cosas para la configuración, las más importantes son

1. entrada - puede ser una matriz o un objeto que define el punto de entrada para el activo que desea agrupar, puede ser una js, ya que la prueba aquí dice hacerlo solo para /.js$. Su aplicación si tiene múltiples puntos de entrada usa una matriz.
2. include: define el conjunto de rutas o archivos donde los archivos importados serán transformados por el cargador.
3. exclude se explica por sí mismo (no transfiera el archivo desde estos lugares).

4. salida: el paquete final que desea crear. si especifica por ejemplo

   salida: {nombre de archivo: "[nombre] .bundle.js", proveedor: "reaccionar"}

   Luego, los archivos js de su aplicación se agruparán como main.bundle.js y reaccionarán en un archivo vendor.js. Es un error si no usa ambos en la página html.

Espero que haya ayudado

Answer 3

Esta documentación me ayudó a entender mejor. Parece que es para el paquete web 1, pero sigue siendo válido.

https://webpack.github.io/docs/configuration.html#module-loaders

Cargadores

Una serie de cargadores aplicados automáticamente.

Cada elemento puede tener estas propiedades:

• prueba: una condición que debe cumplirse
• excluir: una condición que no se debe cumplir
• include: una matriz de rutas o archivos donde los archivos importados serán transformados por el cargador
• cargador: una cadena de cargadores separados "!"
• cargadores: una serie de cargadores como cadena

Este ejemplo me ayudó a entender lo que está pasando. Parece que usa incluir o excluir, pero no ambos. La prueba es una condición aplicada a todos los archivos. Entonces, si incluye una carpeta, cada archivo debe pasar la condición de prueba. No he verificado esto, pero basado en el ejemplo provisto por la documentación, parece que así es como funciona.

 module: {
rules: [
{
// "test" is commonly used to match the file extension
test: //.jsx$/,
// "include" is commonly used to match the directories
include: [
path.resolve(__dirname, "app/src"),
path.resolve(__dirname, "app/test")
],
// "exclude" should be used to exclude exceptions
// try to prefer "include" when possible
// the "loader"
loader: "babel-loader" // or "babel" because webpack adds the ''-loader'' automatically
}
]
}